Question

我已经在Tumblr博客上安装了一个无限滚动脚本，现在我正在添加一个滚动到顶部的按钮。我希望这个按钮在用户向下滚动一定点后淡入，并在向后滚动时淡出。我也希望它提供一个平滑的滚动，而不仅仅是跳到顶部。

我熟悉HTML和CSS，但遗憾的是我基本上对JavaScript和jQuery一无所知。我找到了this tutorial的JS方面，它告诉我如何获得所需的滚动按钮。一切都很好，但唯一的问题是fadeOut不起作用 - 元素只是消失了。有时，如果我很幸运，它会在微秒左右开始消失，但随后会消失。

以下是我正在使用的JavaScript：

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>

<script>
$(function () {
    $("#gotop")
        .hide();
    $(window).scroll(function () {
        if ($(this).scrollTop() > 400) {
            $('#gotop').fadeIn(500);
        } else {
            $('#gotop').fadeOut(500);
        }
    });
    $('#gotop').click(function () {
    $('html,body').animate({
        scrollTop: 0
    }, 400);
    return false;
  });
});
</script>

我的HTML中有一个简单的锚元素，使用id #gotop：

在CSS中设置样式

<a href="#top" id="gotop">Top</a>

CSS：

#gotop {position: fixed;
    right: 2em; bottom: 2em;}

实际上，除了淡出外，一切正常。

我在互联网上浏览了类似的问题。我尝试过各种各样的事情，但不幸的是，大部分都是我的希望。

编辑：我只是想了想。是否有可能淡出不会发生，因为在它有时间淡出之前，页面已经滚动回“隐藏”区域之上并且元素立即被设置为隐藏？

如果有人知道任何事情，我们将不胜感激 - 感谢您的时间！

Answer 1

希望这有帮助

Js Fiddle Demo

$(function () {
 $('#gotop').hide();
$(window).scroll(function () {

        if ($(this).scrollTop() > 400) {
            $('#gotop').fadeIn(500);
        } else {
            $('#gotop').fadeOut(500);
        }
    });
    $('#gotop').click(function () {
    $('html,body').animate({
        scrollTop: 0
    }, 400);
    return false;
  });
     });

Answer 2

好吧，经过一番捣乱，我设法找出了问题。

事实证明，我已经在我的页面上设置了所有元素，以便通过使用*选择器为其分配CSS3过渡：

* {margin: 0; padding: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;}

我这样做是为了方便，所以我所拥有的任何悬停都会有一个很好的过渡。但是，这似乎是导致我的滚动到顶部按钮失灵的原因！

我建议任何遇到问题的人都检查他们使用过的任何过渡，并确保他们不会影响到顶部按钮。如果有任何疑问，请尝试暂时删除它们以进行检查。

希望这有帮助。

jQuery fadeOut不会在Tumblr上消失 - 它只是消失了

2 个答案: