Question

I have an element that contains (surprise!) an article.

There is a list of tags at the top of the page that are found in the article.
When a user clicks a tag it any matching words in the article are highlighted.

What I am having trouble with is then automatically scrolling to the highlighted word.

Is there any way to do this with javascript/jQuery?

The following is my code to find the word and highlight it:

$(".article-tags a.toggle").live("click", function () {
        var $this = $(this);
        var $p = $this.closest("p");
        if ($p.find("span.highlight").length == 0) {
            $("#viewer .article-body").highlight($this.text());
            $this.highlight($this.text());
            document.getElementById("viewer").scrollTop = $p.find("span.highlight").offsetTop;
        }
        else {
            $("#viewer .article-body").removeHighlight();
            $p.removeHighlight();
        }
        return false;
    });

Thanks.

Answer 1

Several ways to accomplish that.

• jQuerys .animate() with scrollTop set to elements.offset().top
• $(window).scrollTop(element.offset().top);
• element.scrollIntoView();

.scrollIntoView() is a native method which you can call on a DOM node directly.