---恢復內容開始---
本文轉載自W3CPLUS, jQuery制作go to top按鈕
每每看到網友Blog的頁面底部或中間有一個按鈕回到頁面頂部，羡慕死人了，但自己就是做不出這樣的效果。后來在google和baidu搜尋了一下，仔細思考，並不像當初想象的那么復雜。經過整理貼到blog中與大家一起分享一下。
我們先來看看效果圖吧：
這個效果是“點我加到頁面頂部”按鈕在頁面底部，當然還有一種效果就是這個按鈕在頁面中間，我就不在示例了。這也是最簡單的效果，還有一種效果就是頁面一開始不顯示這個按鈕，當滾動條向下移動時，到一定的距離才顯示（也就是垂直滾動條距頂部有一定的距離時這個按鈕才顯示）。
我總結了幾種方法，現在從簡單到復雜依次看看幾種實現效果的方法：
DEMO一：
這種效果是最原始的，也是最簡單的。當頁載入時，這個按鈕就存在，並固定在頁面的底部，頁面垂直滾動條離頂部有一定的距離時，點擊“點我回到頁面頂部”按鈕時，頁面就會回到頂部。那就一起看看其實現過程吧：
HTML 代碼：
<div class="container"> <div class="header"> 我是頭部</div> <div class="content">我是主內容，高度是2000px</div> <div class="footer">我是在最底部</div> <div id="goToTop"><a href="#">點我回到頁面頂部</a></div> </div>
為了更好測試效果，所以我們在這里多加了幾個div，其實我們觀注只是其中的一個"<div id="goToTop"><a href="#"></a></div>"這個div，因為我們需要實現的效果都是在這個div中實現的，當然還可以只在其里面的a鏈接標簽元素中實現，為了更好看測試效果，我們給上面標簽元素加上一定的樣式：
<style type="text/css"> .container { width:980px; margin:0 auto; height:auto; min-height:100%; position:relative; } .content { height: 2000px; border: 1px solid red; } #goToTop { position: fixed; bottom: 20px; right: 10%; } #goToTop a { background: none repeat scroll 0 0 #336699; border: 1px solid #CCCCCC; border-radius: 3px; -webkit-border-radius: 3px; color: #FF9966; font-size: 14px; padding: 5px; text-decoration: none; text-shadow: 0 1px 0 #999; -webkit-text-shadow: 0 1px 0 #999; } </style>
現在HTML和CSS都有了，只剩下給這個按鈕加上jQuery的效果了。
首先在<head></head>中加上jQuery的庫：
<script type="text/javascript" src="js/jquery.min.js"></script>
（注：后面的例子都需要這個庫，所以后面沒有特殊說明的情況下，這個庫都在head標簽中存在。）
現在我們就給其加上一定的jQuery代碼：
<script type="text/javascript"> $(document).ready(function(){ $('#goToTop a').click(function(){ $('html,body').animate({scrollTop:0},'slow'); }); }); </script>
現在大家就可以去看看效果了，是不是很爽呀，不過這里說明一下，因為沒有做IE6的bug處理，所以在IE下顯示是不正常的，其他瀏覽器均測試通過，如查需要copy使用的情況下，除IE6下都可以放心正常使用。
DEMO二：
Demo二這種方法實現的更理性化，也更完美化：也就是說一開始我這個按鈕是隱藏的，只有我們的垂直滾動條距頂部有一定的距離后，這個按鈕才會淡出顯示，當回到頂滾動條回到頂部時，此按鈕就又會淡淡的隱藏。怎么樣是不是更完美了，更靚了。如果你喜歡，我們就一起看看其實現過程吧：
HTML代碼和CSS的代碼都是一樣的，為了節省大家的時間我就不在列出來了，如果需要可以參考demo一的代碼，我們主要就是看看jQuery代碼的變化：
<script type="text/javascript"> $(document).ready(function(){ $("#goToTop").hide()//隱藏go to top按鈕 $(function(){ $(window).scroll(function(){ if($(this).scrollTop()>1){//當window的scrolltop距離大於1時，go to top按鈕淡出，反之淡入 $("#goToTop").fadeIn(); } else { $("#goToTop").fadeOut(); } }); }); // 給go to top按鈕一個點擊事件 $("#goToTop a").click(function(){ $("html,body").animate({scrollTop:0},800);//點擊go to top按鈕時，以800的速度回到頂部，這里的800可以根據你的需求修改 return false; }); }); </script>
試試吧，我想你會更喜歡這種效果，同時也會更有成就感。（注：這個Demo在IE6下CSS需做一定的處理，才能正常顯示）
DEMO三：
DEMO三比前面兩個DEMO都稍微更復雜一點，不過你理解了前面兩個DEMO的話，我想你對這個Demo也不會感覺復雜，首先我們先看看各位代碼的變化吧。
HTML代碼：
<div class="container"> <div class="header"> 我是頭部</div> <div class="content">我是主內容，高度是2000px</div> <div class="footer">我是在最底部</div> </div>
跟前面的代碼相比較，我們可以明顯的看出，這個DEMO少了一個div:
<div id="goToTop"><a href="#">點我回到頁面頂部</a></div>
大家一定會感覺很奇怪，沒了這個按鈕，怎么點擊回到頂部呢？想得也是沒有錯，我一開始也是這么想的，但后來看完整個DEMO后才恍然大悟，所以大家先別急，接着往下看。
CSS 代碼：
#goToTop {
position: absolute;
right: -130px;
z-index: 9000;
}
其他樣式代碼都是一樣的，這里只是對goToTop的div稍作修改了一下。雖然我們在HTML中暫時不存在這樣的一個div，但我們后面還是用得上的，所以先把樣式在這里修改好加上去。完成這兩步了，又到了實現效果的關鍵一步：
jQuery代碼：
<script type="text/javascript"> $(function(){ var topDistance = 600;//goToTop距瀏覽器頂端的距離，這個距離可以根據你的需求修改 var showDistance = 1;//距離瀏覽器頂端多少距離開始顯示goToTop按鈕，這個距離也可以修改，但不能超過瀏覽器默認寬度，為了兼容不同分辨率的瀏覽器，我建議在這里設置值為1； var goToTopButton = "<div id='goToTop'><a href='#'>點我回到頁面頂部</a></div>";//定義一個變量，方便后面加入在html元素標簽中插入這個goToTop按鈕的標簽 var thisTop = $(window).scrollTop() + topDistance; $("div.container").append(goToTopButton);//在container的div里插入我們前面定義好的html標簽元素 $("#goToTop").css("top",thisTop);//設置goToTop按鈕top的css屬性和屬性值 if($(window).scrollTop() < showDistance) { $("#goToTop").hide();//滾動條距離頂端的距離小於showDistance是隱藏goToTop按鈕 } $(window).scroll(function(){ thisTop = $(this).scrollTop() + topDistance; $("#goToTop").css("top",thisTop);//修改goToTop按鈕的top距離 if($(this).scrollTop() < showDistance) {//當window的垂直滾動條距頂部距離小於showDistance設置的值 時 $("#goToTop").fadeOut("fast");//goToTop按鈕淡出 } else { $("#goToTop").fadeIn("fast");//反之按鈕淡入 } }); //給go to top按鈕綁定一個click事件 $("#goToTop a").click(function(){ $("html,body").animate({scrollTop:0},"slow");//慢慢回到頁面頂部 return false; }); }); </script>
這個DEMO是不是更合理的呀。這里有一點需要再次解釋一下：最開始我們在HTML並沒有加上goToTop的元素，怎么就有了呢？主要是我們通過jQuery加載了這個按鈕的html標簽，大家只要留意一下，我們加載頁面后，通過firebug就可以看到這個按鈕的標簽也同時加載進來了：
這下大家清楚了吧，不清楚的可以試試。動手了就一切都明白了。（注：這個demo經過測試在各瀏覽器下都能正常運行）
DEMO四：
現在我們要看的這個Demo是通過配合jQuery的插件來實現回到頁面頂部的效果，我們一起來看看其實現的過程。其中HTML 和CSS和我們一開始說的Demo一的是一樣的，我們現在主要看其插件如何寫，接着是如何調用寫好的插件。
jQuery代碼：
<script type="text/javascript"> //編寫jQuery的回到頁面頂部的插件 jQuery.fn.goToTop = function(){ if($(window).scrollTop() < 1) { $("#goToTop").hide();//滾動條距離頂端的距離小於showDistance是隱藏goToTop按鈕 } $(window).scroll(function(){ if($(this).scrollTop()>1){ $("#goToTop").fadeIn(); } else { $("#goToTop").fadeOut(); } }); //給這個按鈕綁定一個單擊事件 this.bind('click',function(){ $('html,body').animate({scrollTop:0},'slow'); return false; }); } //調用這個插件 $(document).ready(function(){ $('#goToTop').goToTop(); }); </script>
這樣我們就完成了怎么使用插件來制作go to top的按鈕了。（注：IE6中css存在bug，其他瀏覽器測試完全通過）。
DEMO五：
這個demo也是通過插件的方式實現的，但們跟demo4還是有一定的區別，首先我們看HTML和CSS代碼：
HTML代碼：
<div class="container"> <div class="header"> 我是頭部</div> <div class="content">我是主內容，高度是2000px</div> <div class="footer">我是在最底部</div> </div>
CSS代碼：
#goToTop { position: fixed; right: 10%; z-index: 9000; bottom: 10px; }
其主要的還是看jQuery的實現過程
<script type="text/javascript"> //編寫一個插件叫做goToTop jQuery.fn.goToTop = function(settings) { settings = jQuery.extend({ min: 1, //設置距離頂部的最小值為1 fadeSpeed: 200, //設置一個淡出淡入的速度 ieOffset: 50 //處理IE的兼容問題 },settings); return this.each(function(){ //listen for scroll var el = $(this); el.css("display","none");//in case the user forgot $(window).scroll(function(){ //stupid IE hack if(!jQuery.support.hrefNormalized) { //設置這個按鈕的css屬性 el.css({ "position": "absolute", "top" : $(window).scrollTop() + $(window).height() - settings.ieOffset }); } if($(window).scrollTop() >= settings.min) { el.fadeIn(settings.fadeSpeed); } else { el.fadeOut(settings.fadeSpeed); } }); }); }; $(function(){ var goToTopButton = "<div id='goToTop'><a href='#'>點我回到頁面頂部</a></div>"; $("div.container").append(goToTopButton); //插入按鈕的html標簽 if($(window).scrollTop() < 1) { $("#goToTop").hide();//滾動條距離頂端的距離小於showDistance是隱藏goToTop按鈕 } $("#goToTop").goToTop({ min:1, fadeSpeed: 500 }); $("#goToTop").click(function(e){ e.preventDefault(); $("html,body").animate({scrollTop:0},"slow"); }); }); </script>
大家可以對比一下，demo四和demo五的兩種插件寫法的相同與不同之處。
DEMO六：
這個Demo是我們今天要說的最后一個效果了，這個效果跟前面的每一個demo都有一點不同，主要有以下幾個不同點：第一，我們是通過jQuery給頁面加載了一個頂點的錨點和一個回到頂部的按鈕，第二點，我們是通過點擊按鈕后回到了頁面的起始錨點，所以這里需要注意一點，這個錨點必須放在頁面的最頂端，第三點，我們點擊了按鈕后，按鈕會回到錨點位置，同時按鈕也會慢慢的隱藏起來。接着我們就來看看吧
HTML代碼：
<div class="container"> <div class="header"> 我是頭部</div> <div class="content">我是主內容，高度是2000px</div> <div class="footer">我是在最底部</div> </div>
當頁面加入下面的jQuery代碼后，我們的HTML代碼就會自動加載一個錨點和一個按鈕的元素標簽，看看Firebug中的截圖：
CSS代碼：
#goToTop { position: fixed; right: 10%; z-index: 9000; top: 100%; margin-top: -50px; }
又來到jQuery這一關鍵一步了，大家可以仔細看看下面的代碼：
<script type="text/javascript"> $(function(){ var topPosition = "<div id='top'></div>"; //定義頂部錨點的標簽 var goToTopButton = "<div id='goToTop'><a href='#'>點我回到頁面頂部</a></div>"; //定義按鈕標簽 $("div.container").prepend(topPosition); //在container的div最前面加上錨點標簽 $("div.container").append(goToTopButton); //在container的div最后面加上按鈕標簽 if($(window).scrollTop() < 1) { $("#goToTop").hide(); //滾動條距離頂端的距離小於showDistance是隱藏goToTop按鈕 } var scroll_timer; var displayed = false; var $window = $(window); var top = $(".container").children(0).position().top; $window.scroll(function(){ window.clearTimeout(scroll_timer); scroll_timer = window.setTimeout(function(){ if($window.scrollTop() <= top) { displayed= false; $("#goToTop").fadeOut(500); } else if(displayed == false) { //show if scrolling down displayed = true; $("#goToTop").stop(true,true).show().click(function(){ $("#goToTop").fadeOut(500); }); } },100); }); }); </script>
如果跟着做了的朋友，回到瀏覽器下就能看看效果了。（注：IE6下沒有做兼容處理）。
---恢復內容結束---