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;

向下滚动单击动画

3 个答案: