CODEWITHSUNDEEP
javascriptjqueryhtml
electricsheep
electricsheep

Reputation: 5224

Auto scroll to span element

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.

Upvotes: 1

Views: 5644

Answers (2)

Nathan
Nathan

Reputation: 11159

$('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.

Upvotes: 0

jAndy
jAndy

Reputation: 236202

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.

Upvotes: 5

Related Questions