jquery - scrollTop 功能不会将页面滚动到顶部

Question

我有以下 JQuery 可以使用 animate() 将页面滚动到顶部：

$(document).ready(function(){
    $(window).scroll(function() {
        if($(this).scrollTop() != 0) {
            $('#toTop').fadeIn();   
        } else {
            $('#toTop').fadeOut();
        }
    });

    $('#toTop').click(function() {
        $('body,html').animate({scrollTop:0},800);
    });
});

我的用于滚动页面的 HTML 是：

<div class="gototop" id="toTop"></div>

但我遇到的问题是，如果我只使用一个，那么 HTML 代码就可以工作。如果我有多个，它们都不起作用。

Answer 1

你是说如果你有多个<div class="gototop" id="toTop"></div>它不会工作？

您不应该有多个具有相同 ID 的 div，例如id="toTop"在您的代码中。您可以像这样使用一堆 div：<div class="gototop"></div>并将您的 jquery 更改为如下所示：

$(document).ready(function(){
$(window).scroll(function() {
    if($(this).scrollTop() != 0) {
        $('.gototop').fadeIn();   
    } else {
        $('.gototop').fadeOut();
    }
});

$('.gototop').click(function() {
    $('body,html').animate({scrollTop:0},800);
});
});

Answer 2

IDs 必须是唯一的。我假设您复制并粘贴<div class="gototop" id="toTop"></div>，然后多次使用一个 ID，这是一个错误。

而是完全跳过 ID 属性<div class="gototop" id="toTop"></div>并将您的 jQuery 更改为：$('.gototop').click(function()