向下滾動一定距離出現返回頂部按鈕代碼實例:返回頂部按鈕在很多網站都有應用，也確實非常的人性化，但是有些網站可能會更進一步，那就是在預設狀態下，返回頂部按鈕在預設狀態下是隱藏的，只有向下拖動滾動條一定的距離，按鈕才會顯示，下麵就通過代碼實例介紹一下如何實現此功能。代碼如下: <!DOCTYPE htm
向下滾動一定距離出現返回頂部按鈕代碼實例:
返回頂部按鈕在很多網站都有應用，也確實非常的人性化，但是有些網站可能會更進一步，那就是在預設狀態下，返回頂部按鈕在預設狀態下是隱藏的，只有向下拖動滾動條一定的距離，按鈕才會顯示，下麵就通過代碼實例介紹一下如何實現此功能。
代碼如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> body{ margin:0px; padding:0px; height:1500px; } .top{ width:50px; height:50px; background:green; position:fixed; right:5px; bottom:20px; display:none; } </style> <script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function(){ $(window).bind('scroll',function(){ if($(document).scrollTop()>200){ $(".top").show(); } else{ $(".top").hide(); } }) $(".top").click(function(){ $('body,html').animate({scrollTop:0},1000); }) }) </script> </head> <body> <div class="top"></div> </body> </html>
上面的代碼實現了我們的要求，下麵介紹一下此效果的實現過程。
一.實現原理:
返回頂部的按鈕通常是固定在網頁的右下側，這樣我們可以設置按鈕的定位方式為position:fixed，然後通過定位方式將其固定於右下角，同時將其設置為不可見狀態。當向下拖動滾動條的時候，當到達指定的位置，那麼就將其設置為可見，點擊按鈕可以是網頁返回頂部，當向下拖動的距離小於指定的距離，此按鈕又會被隱藏，更多內容可以看代碼註釋。
二.代碼註釋:
1.$(function(){})，當文檔結構完全載入完畢再去執行函數中的代碼。
2.$(window).bind('scroll',function(){})，問視窗註冊scroll事件處理函數，也就是拖動滾動條的時候能夠觸髮指定的函數。
3.if($(document).scrollTop()>200){$(".top").show();}，當網頁向上固定的距離超過200px，那麼就顯示按鈕。
4.else{$(".top").hide();}，否則將會隱藏按鈕。
5. $(".top").click(function(){$('body,html').animate({scrollTop:0},1000);})，為按鈕註冊click事件處理函數，事件處理函數能夠以動畫方式將scrollTop屬性值在1秒內設置為0，也就是滾動到頂部。
三.相關閱讀:
1.bind()函數可以參閱javascript的bind()函數用法詳解一章節。
2.scrollTop()函數可以參閱jQuery的scrollTop()函數用法詳解一章節。
3.animate()函數可以參閱jQuery的animate()方法一章節。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=14259
更多內容可以參閱:http://www.softwhy.com/jquery/
