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

我這樣做是為了方便，這樣我進行的任何懸停都會有一個很好的過渡。 但是，這似乎是導致我的滾動至頂部按鈕發生故障的原因！

我建議與我有相同問題的任何人都要檢查他們使用的所有轉換，並確保它們不會影響“頂部”按鈕。 如果有任何疑問，請嘗試暫時將其刪除以進行檢查。

希望這可以幫助。