1. 程式人生 > >返回頂部隱藏顯示的控制程式碼

返回頂部隱藏顯示的控制程式碼

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