Автопрокрутка на элемент span

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

Несколько способов сделать это.

• jQuerys .animate() с scrollTop, установленным на elements.offset().top
• $(window).scrollTop(element.offset().top);
• element.scrollIntoView();

.scrollIntoView() - это собственный метод, который можно напрямую вызывать на узле DOM.

Answer 2

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

Это должно сделать это.Вы добавляете привязку непосредственно перед элементом, затем прокручиваете его.Вы можете добавить $('a.highlighted').remove() перед этим, чтобы удалить все предыдущие добавления.