返回頂部隱藏顯示的控制程式碼
阿新 • • 發佈:2019-01-06
js
css
$(function() { $(window).scroll(function() { if ($(this).scrollTop() > 1) { //當window的scrolltop距離大於1時,go to top按鈕淡出,反之淡入 $("#gotoTop").fadeIn(); } else { $("#gotoTop").fadeOut(); } }); $("#gotoTop").click(function() { $("html,body").animate({ scrollTop: 0 }, 400); //點選go to top按鈕時,以400的速度回到頂部,這裡的400可以根據你的需求修改 return false; }); })
html:
<a class="item" href="javascript:void(0)" id="gotoTop"
style="display: none"><i class="top-icon icon"></i> </a>
<script>
css
.float-nav .item { display: block; border-bottom: 1px solid #D8D8D8; padding: 8px 0; color: #555; } .float-nav .top-icon { background-position: -50px -200px; height: 13px; } .float-nav .icon { display: block; width: 26px; height: 23px; margin: 0 auto; }