jQuery fadeout不會在Tumblr上淡出 - 它只是消失

我已經在我的Tumblr博客上安裝了一個無限滾動腳本，現在我正在添加一個滾動到頂部的按鈕。我希望這個按鈕在用戶向下滾動到某一點時淡入，當他們向後滾動時淡出。我也希望它能夠提供平滑的滾動，而不僅僅是跳到頂部。jQuery fadeout不會在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;}

事實上，除淡出外，一切正常。

我瀏覽過類似此類問題的網絡。我嘗試了各種各樣的東西，但很不幸，它們大部分都是希臘語。

編輯：我只是有一個想法。是否有可能淡出沒有發生，因爲在淡出之前，頁面已經滾動回到「隱藏」區域之上，並且該元素立即被設置爲隱藏？

如果有人知道任何事情，這將非常感謝 - 感謝您的時間！

來源

2013-09-26 Ben

希望這有助於

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

來源

2013-09-26 04:09:17

好了，經過一番擺弄周圍，我設法弄清楚這個問題。

事實證明，我有我的頁面上設置所有元素都分配有一個CSS3過渡，通過使用*選擇的：

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

我這樣做是爲了方便，這樣任何懸停我會有一個很好的過渡。但是，似乎這是導致我的滾動到頂部按鈕失誤的原因！

我會建議任何與我有同樣問題的人檢查他們使用過的任何轉換，並確保他們不會影響到頂部按鈕。如果有任何疑問，請嘗試暫時刪除它們，以便檢查。

希望這會有所幫助。

來源

2013-09-27 01:19:10 Ben

jQuery fadeout不會在Tumblr上淡出 - 它只是消失

回答

相關問題