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

我有以下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>

目前div#notes位于链接下方的500px+上

我如何在不指定500的情况下自动定位它，类似于scrollTo=>$（“#main”）.scrollTo（“#notes”）；因为我可能会更改顶部的文本，所以div#notes不再是500

另外，如何仅在滚动动画完成时添加类，因为如果动画滚动到达div#notes时文本很长，样式已经完成（我将css转换设置为平滑更改样式），我希望用户看到转换

您可以使用查找最大值

使用的完整回调函数

试一试

演示：

您可以使用查找最大值

使用的完整回调函数

试一试

演示：

我如何在不指定500的情况下自动定位它……您只需获得

#notes

的顶部位置，如下所示：

$（'#notes'）.position（）.top

还有如何仅在滚动动画完成时添加类…您可能需要再次检查，

animate（）

有一个

complete:function（）

在动画完成后调用

这是：

$('#goto-notes').click(function(){
    var n = $('#notes);

    $('#main').animate({
        scrollTop: n.position().top
    },{
        duration: 2000,
        complete: function(){
            n.addClass('seen');
        }
    });  
});

这里是

我如何在不指定500的情况下自动定位它……您只需获得

#notes

的顶部位置，如下所示：

$（'#notes'）.position（）.top

还有如何仅在滚动动画完成时添加类…您可能需要再次检查，

animate（）

有一个

complete:function（）

在动画完成后调用

这是：

$('#goto-notes').click(function(){
    var n = $('#notes);

    $('#main').animate({
        scrollTop: n.position().top
    },{
        duration: 2000,
        complete: function(){
            n.addClass('seen');
        }
    });  
});

---

这是

你能用你的css添加到吗？这个答案不需要css…是的，对不起，自从OP提到css转换后，我认为需要css。你能用css添加到吗？这个答案不需要css…是的，对不起，自从OP提到css转换后，我认为需要css。为什么要动画$（'body'）？对不起，我解释得不好。我体内有很多东西。此内容仅在我的div#main上。当我点击你的小提琴时，它不会向下滚动为什么要设置$（'body'）？对不起，我解释得不好。我体内有很多东西。此内容仅在我的div#main上。当我点击你的小提琴时，它不会向下滚动谢谢@Mike Barwick！谢谢@Mike Barwick！

$('#goto-notes').click(function(){
    var n = $('#notes);

    $('#main').animate({
        scrollTop: n.position().top
    },{
        duration: 2000,
        complete: function(){
            n.addClass('seen');
        }
    });  
});