自动滚动到span元素

时间:2010-11-23 16:11:51

标签: javascript jquery html html5

我有一个包含(惊喜!)文章的元素。

在文章的顶部有一个标签列表。 当用户点击标签时,文章中任何匹配的单词都会突出显示。

我遇到的问题是自动滚动到突出显示的单词。

有没有办法用javascript / jQuery做到这一点?

以下是我找到该单词并突出显示的代码:

$(".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;
    });

感谢。

2 个答案:

答案 0 :(得分:4)

实现这一目标的几种方法。

  • j .animate() scrollTop设置为elements.offset().top
  • $(window).scrollTop(element.offset().top);
  • element.scrollIntoView();

.scrollIntoView()是一种本机方法,您可以直接在DOM节点上调用它。

答案 1 :(得分:0)

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

应该这样做。您正在元素之前添加一个锚点,然后滚动到它。您可能希望在此之前输入$('a.highlighted').remove()以清除之前的任何添加内容。