javascript - 单击按钮时如何使页面滚动到特定元素？滚动动画，如果可能的话

Question

正如标题所说，当用户单击文本/图像时，我想让页面滚动到页面上的特定元素。如果可能的话，我不希望它只是跳到那个元素，而是有一个滚动动画。我知道可以用 JS 做，但我忘了你是怎么做的。

Answer 1

根据您的具体需要，您可以以这种方式组织代码，以便您可以将需要滚动的元素的 ID 传递给点击处理程序。

<a href="#scrollHere">Click me</a>

<div id="scrollHere"></div>

$('a[href^="#"]').on('click', function(event) {
    var target = $(this.href);
    if( target.length ) {
        event.preventDefault();
        $('html, body').animate({
            scrollTop: target.offset().top
        }, 1000);
    }
});

这将在一秒内将页面滚动到 #scrollHere 元素 (1,000 毫秒 = 1 秒)。

或者以更通用的方式:

$('.someElement').on('click', function(event) {
        var target = $('#someElementToScrollTo');    
        $('html, body').animate({
            scrollTop: target.offset().top
        }, 1000);    
});