Question

我是否需要将锚点包裹在div中，然后使用div ID进行淡入淡出？如果$(this)用于#scrollToTop我可以以某种方式使用this.fade吗？我似乎无法让这个简单的JQuery生效。我想隐藏#scollToTop直到滚动。我应该将其包裹在div并操纵div吗？

<a href="#" id="scrollToTop"></a>


$(window).scroll(function() {
    if ($(this).scrollToTop() > 75) {
        $('#scrollToTop').fadeIn();
    } else {
        $('#scrollToTop').fadeOut();
    }
});

Answer 1

您无法使用它的原因是代码错误。

提示：学会使用浏览器的开发者控制台 - 在javascript中开发时绝对必要。您遇到错误 - scrollToTop不是函数。（你想要scrollTop）。这是问题的主要原因。

回答你的问题：

在jQuery中，$(this)指的是触发事件的元素。因此，在您的代码中，$(this)引用$(window)，因此$(this).scrollTop正在衡量窗口的scrollTop位置（与编写$(window).scrollTop相同）。

由于不引用#scrollToTop，所以不，您不能使用$(this).fade来隐藏按钮。你做得很好。

不，你不需要将它包装在div中并操纵它。

此外，我已添加trigger调用以确保按钮在初始加载时隐藏，如果页面在应隐藏的范围内。（触发器“触发”您正在观看的事件 - 在这种情况下为scroll - 立即执行，因此回调将运行，并且该按钮将被隐藏/显示（如果适用）。

以下是working jsFiddle，以及相关代码：

$(window).scroll(function() {
    // scrollToTop is not a function - changed to scrollTop
    if ($(this).scrollTop() > 75) {
        $('#scrollToTop').fadeIn();
    } else {
        $('#scrollToTop').fadeOut();
    }
}).trigger('scroll');

滚动到窗口顶部时，JQuery隐藏按钮

1 个答案: