javascript - 自动滚动到跨度元素

Question

我有一个元素，其中包含(令人惊讶!)一篇文章。

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

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

有什么方法可以用 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;
    });

谢谢。

Answer 1

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

• jQuery .animate()，其中 scrollTop 设置为 elements.offset().top
• $(window).scrollTop(element.offset().top);
• element.scrollIntoView();

.scrollIntoView() 是一个 native 方法，您可以直接在 DOM 节点上调用。