点击动画向下滚动

Question

我有 html 页面。 我想用动画向下滚动按钮单击（按钮的类为 "s_down_button" ）。

我需要在 element_height + 20 像素向下滚动屏幕。

element_height - 具有“tp-bgimg”类的元素的高度

所以我尝试：

jQuery(document).ready(function($) {

    $(".s_down_button").click(function(){
        var element_height = $(".tp-bgimg").height();
        var scroll_height = element_height +20;
        $('body').scrollTo(scroll_height);
    }); 

});

但我收到一个错误：

Uncaught TypeError: $(...).scrollTo is not a function

Answer 1

$("html, body").animate({ scrollTop: scroll_height }, 600);

其中 600 是以毫秒为单位的动画时间。 有关更多信息，请查看animate jquery doc

Answer 2

您正在寻找的功能是：

$('body').animate({scrollTop: positionToScrollTo}, 500);

我喜欢做的是创建一个 scrollTo 函数来调用这行代码：

function scrollTo(position) {
    $('body').animate({scrollTop: position}, 500);
}

Answer 3

这应该有效：

$(document).ready(function() {
    $(".s_down_button").click(function(){
        var element_height = $(".tp-bgimg").height();
        var scroll_height = element_height +20;
        $('body').animate({scrollTop: scroll_height }, 500);
    });
});

如果您的元素不在页面的最顶部，您应该添加偏移量：

var offsetOfElement = $(".tp-bgimg").offset().top;

所以可变滚动高度是：

var scroll_height = element_height + offsetOfElement +20;