頁面滾動時的動畫div位置

我有一個div，當用戶向下滾動頁面（單擊它並將頁面返回到頁面頂部）時出現。目前它只是淡入淡出，但我希望它從頁面的右側滑入。頁面滾動時的動畫div位置

這裏是我當前的代碼：

的Jquery：

<div class="toTop"> 
Back to the top 
</div> 
<script> 
    $(window).scroll(function() { 
    if ($(this).scrollTop()) { 
     $('.toTop').fadeIn(); 
    } else { 
     $('.toTop').fadeOut(); 
    } 
}); 
</script>

CSS：

.toTop { 
    padding: 10px; 
    background: rgb(55,161,222); 
    color: #fff; 
    position: fixed; 
    bottom: 50%; 
    right: 0px; 
    display: none; 
    z-index:1000; 
    text-transform:uppercase; 
    font-weight:600; 
}

您還可以看到我在做什麼在這裏： http://www.samskirrow.com/client-hope

來源

2012-11-26 Sam Skirrow

獲取擺脫display:none。

集right:-200px和使用.animate({ right: 0px })代替.fadeIn()和.animate({ right: -200px })而不是。

將您的if語句更改爲if ($(this).scrollTop() > 100)。這是因爲scrollTop()函數返回當前滾動位置的頂部像素數。

來源

2012-11-26 21:14:38 Toast

作品完美，但不會再滾動備份時。有什麼想法嗎？ –

抱歉，延遲。編輯新問題的答案。 – Toast

謝謝@Toast只有最後一個問題是，有一個隨機延遲div回移（字面上隨機 - 有時它不到5秒，有時它是超過20秒） –

向下滾動時更換$('.toTop').fadeIn();與.animate({"right":"-50px"}, "slow");

來源

2012-11-26 21:16:59 user1106295

謝謝@ user1106295如何讓它消失時再次我在頂端？ –

是否添加了其他{$（'。toTop'）。animate（{right：-200px}）}而不是其他的.... fadeout？ – user1106295

你完成了嗎？ – user1106295

頁面滾動時的動畫div位置

回答

相關問題