javascript - jQuery fadeOut 不会在 Tumblr 上淡出——它只是消失了

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 中有一个简单的 anchor 元素，使用 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;
  });
     });