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.

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.

• javascript
• jquery
• html

Share Improve this question Follow asked Nov 23, 2010 at 16:11 electricsheepelectricsheep 5,22499 gold badges3838 silver badges4141 bronze badges 1

• Does it work in the first place? I see that this scrolls, so may I assume that it doesn't work? – Blender Commented Nov 23, 2010 at 16:15

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Several ways to acplish 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.

$('span.highlight').first().prepend('<a class="highlighted" name="hightlighted" />');
window.location.hash = '#highlighted';

That should do it. You're adding an anchor just before the element, then scrolling to it. You might want to put in a $('a.highlighted').remove() before this to clear any previous additions.