先来看几个图片效果：
提供几个样式图片：
样式图片都可以自己随便修改了
样式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>
文章内容自己添加