JQuery 不显示按钮答案

【问题标题】：JQuery not showing a buttonJQuery 不显示按钮
【发布时间】：2015-04-18 14:19:55
【问题描述】：

基本上我正在制作一个返回顶部按钮，但我无法显示该按钮。

这是我的代码：

JavaScript：

$(document).ready(function() {
    var btt = $('.back-to-top');
    $(window).on('scroll', function () {
        var self = $(this),
            height = self.height(),
            top = self.scrollTop();
        if(top > height) {
            if(!btt.is(':visible')) {
                btt.show();
            }
        } else {
            btt.hide();
        }
    });
});

HTML：

<a href="#" class="back-to-top">Back to top</a>

【问题讨论】：

什么是你的 html 中的 back-to-top？是按钮的id还是class？
@Stamen 它的类。我已将其添加到问题中
有可能是链接显示了，但是不可见，因为你已经滚动到页面底部了。换句话说，链接可能不会随着 html 中的滚动而移动。我建议你添加一些 console.log 或 alert 调试消息来看看发生了什么。

标签： javascript jquery

【解决方案1】：

您的代码看起来不错。那么您是否将 html 或 body css 高度设为 100%。在这种情况下，它无法检测到 Chrome 上的滚动。

这里是解决这个问题的解决方案； jQuery Scrolling issue with body height 100%

希望对您有所帮助。

【讨论】：

【解决方案2】：

添加一些console.log(top+":"+height);在 if/else 之前添加到您的代码，这样您就可以看到这一点。但是高度和滚动顶部并不是你想象的那样。我认为，如果您对包含容器的高度进行一些数学运算，您就可以做您想做的事。使用 chrome/firefox 开发控制台查看 console.log 的输出。

【讨论】：

你可能需要 scrollBottom var scrollBottom = $(window).scrollTop() + $(window).height();