Javascript find and scroll to text

Question

I need a bit of Javascript that will find some text in the html page and then scroll to that point.

So something like "Are you a Lib Dem or Tory supporter and how do you feel about the deal?" would scroll down to the bottom of the page for this bbc news page: http://news.bbc.co.uk/1/hi/uk_politics/election_2010/8676607.stm

Im hoping there is a built in function for both the find text and scroll.

Answer 1

Try this. It works on the site you provided:

$(window).scrollTop($("*:contains('Are you a Lib Dem or Tory'):last").offset().top);

It finds last, deepest element that contains given phrase on the page and scrolls to it.

---

If you want to do the same thing without jQuery you need to use XPath becasue CSS didn't get contains() selector.

window.scrollBy(0, document.evaluate("//*[text()[contains(., 'Lib Dem')]][last()]", document.body).iterateNext().getBoundingClientRect().top);

If you need to scroll to the first occurrece, not the last one, delete [last()] from this code.

Answer 2

You can also use what google is using to scroll to and highlight specific portions of a search result when you visit the page.

It generates a URL like this:

https://www.inc.com/peter-roesler/heres-what-googles-new-highlight-feature-means-for-your-website.html#:~:text=If%20you%20see%20a%20featured,saw%20in%20the%20featured%20snippet.

It is kind of nifty. The syntax seems to be:

https://example.com/#:~:beginning_of_text,end_of_text

See the following blog post for a few more details:

https://web.dev/text-fragments/

It is supported by version 80 and beyond chromium based browsers. So, limited support right now, but depending on your use case, it could be useful.