先來看幾個圖片效果：
提供幾個樣式圖片：
樣式圖片都可以自己隨便修改了
樣式css:
<style type="text/css"> body,p,a,div{ margin:0px; padding:0px; } body{ font:14px/22px Georgia serif; margin:0 auto; width:640px; } h1{ font: bold 80%/120% Arial, Helvetica, sans-serif; text-transform: uppercase; margin: 0 0 10px; color: #999; } h2{ font-size: 22px; margin: 0 0 8px; } h3{ font-size: 1.6em; margin: 20px 0 5px; } a{ color: #333; text-decoration: none; } a:hover{ color: #548B02; } p{ margin-bottom:25px; } #back-to-top{ position:fixed; bottom:100px; left:60px; } #back-to-top a{ text-align:center; text-decoration:none; color:#d1d1d1; display:block; width:80px; /*使用CSS3中的transition屬性給跳轉鏈接中的文字添加漸變效果*/ -moz-transition:color 1s; -webkit-transition:color 1s; -o-transition:color 1s; } #back-to-top a:hover{ color:#979797; } #back-to-top a span{ background:#d1d1d1; border-radius:6px; display:block; height:80px; width:80px; background:#d1d1d1 url(images/arrow_up1.png) no-repeat center center; /*這是圖片鏈接地址1*/ margin-bottom:5px; -moz-transition:background 1s; -webkit-transition:background 1s; -o-transition:background 1s; } #back-to-top a:hover span{ background:#979797 url(images/arrow_up1.png) no-repeat center center; /*這是圖片鏈接地址1*/
} </style>
Jquery代碼：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>//這里引入你自己的jq或者用這個在線jq <script type="text/javascript"> $(document).ready(function () { //首先將#back-to-top隱藏 $("#back-to-top").hide(); //當滾動條的位置處於距頂部100像素以下時，跳轉鏈接出現，否則消失 $(function () { $(window).scroll(function () { if ($(window).scrollTop() > 100) { $("#back-to-top").fadeIn(1500); } else { $("#back-to-top").fadeOut(1000); } }); //當點擊跳轉鏈接后，回到頁面頂部位置 $("#back-to-top").click(function () { $('body,html').animate({ scrollTop: 0 }, 1000); return false; }); }); }); </script>
html：
<body id="top"> <p id="back-to-top"><a href="#top"><span></span>回到頂部</a></p> 這里面放文章的內容就好了
</body>
文章內容自己添加