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

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

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

scrollTop函数不会将页面滚动到顶部

2 个答案: