Question

我有这个HTML标记：

<div id="main">
    <p>some text</p>
    <a id="goto-notes" href="#">see notes</a>
    <p>some text...</p>
    <div id="notes">
        <p>notes here</p>
    </div>
</div>

现在我想在点击#goto-notes时滚动到div＃notes，然后在div＃notes中添加一个类（see）来改变样式。我之前使用jquery scrollTo来轻松完成它，但现在我想知道如何在没有scrollTo或任何插件的情况下执行此操作。我做了一些研究，这是我到目前为止所做的。

$('#goto-notes').click(function(){
    $('#main').animate({scrollTop:500},'slow');
    $('#notes').addClass('seen');
});

目前div＃notes位于链接下方500px +处。

如何在不指定类似于scrollTo =＆gt;中此方法的500的情况下自动定位它$（ '＃主'）scrollTo（ '＃笔记'）。因为我可能会在顶部更改文本，所以div＃notes不再是500。
也只有当滚动动画完成时才会添加类，因为如果文本很长，当动画滚动到达div＃notes时样式已经完成（我把css过渡到平滑地改变样式），I希望用户看到过渡。

Answer 1

您可以使用.offset()查找最高值
使用animate()

尝试

$('#goto-notes').click(function () {
    var $notes = $('#notes');
    $('body').animate({
        scrollTop: $notes.offset().top
    }, 'slow', function () {
        $notes.addClass('seen');
    });
});

演示：Fiddle

Answer 2

如何在不指定500的情况下自动定位... 您只需要像#notes一样获得$('#notes').position().top的顶部位置：animate() < / p>
仅在滚动动画完成时如何添加类... 您可能想再次检查animate() API docs，complete: function()有$('#goto-notes').click(function(){ var n = $('#notes); $('#main').animate({ scrollTop: n.position().top },{ duration: 2000, complete: function(){ n.addClass('seen'); } }); });动画完成后调用。

这是：

{{1}}

这是fiddle

单击链接滚动到元素，然后向该元素添加一个类

2 个答案: