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

Question

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

我很精通HTML和CSS，但不幸的是我基本上对JavaScript和jQuery一无所知。 我在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小提琴演示

$(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;}

我这样做是为了方便，这样我进行的任何悬停都会有一个很好的过渡。 但是，这似乎是导致我的滚动至顶部按钮发生故障的原因！

我建议与我有相同问题的任何人都要检查他们使用的所有转换，并确保它们不会影响“顶部”按钮。 如果有任何疑问，请尝试暂时将其删除以进行检查。

希望这可以帮助。