點擊動畫向下滾動

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;