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 milliseconds = 1 second)元素。

或者以更通用的方式：

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

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

1 个答案: