Search code examples
phpjavascriptscroll

Javascript find and scroll to text

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.

Solution

  • 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.