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

Question

我是否需要将 anchor 包裹在 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');