转自：http://blog.csdn.net/itmyhome1990/article/details/25340705
整理两个实现功能，一个是右下角的返回顶部，一个是右侧的返回顶部，分别如图
第一种实现
一、JSP或HTML(主体结构)
在body中添加
<body id="top"> <p id="back-to-top"><a href="#top"><span></span></a></p> </body>
二、CSS(样式化)
<style> p#back-to-top { position: fixed; bottom: 50px; right: 50px; } p#back-to-top a { text-align: center; text-decoration: none; color: #d1d1d1; display: block; width: 50px; /*使用CSS3中的transition属性给跳转链接中的文字添加渐变效果*/ -moz-transition: color 1s; -webkit-transition: color 1s; -o-transition: color 1s; } p#back-to-top a:hover { color: #979797; } p#back-to-top a span { background: #d1d1d1 url(/img/back_to_top.png) no-repeat center center; border-radius: 6px; display: block; height: 50px; width: 50px; margin-bottom: 5px; /*使用CSS3中的transition属性给<span>标签背景颜色添加渐变效果*/ -moz-transition: background 1s; -webkit-transition: background 1s; -o-transition: background 1s; } #back-to-top a:hover span { background: #979797 url(/img/back_to_top.png) no-repeat center center; } </style>
图片自己网上找资源
三、jQuery(动态效果)
<script> $(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(1500); } }); //当点击跳转链接后，回到页面顶部位置 $("#back-to-top").click(function() { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); }); </script>
第二种实现
<style> .backToTop { display: none; width: 18px; line-height: 1.2; padding: 5px 0; background-color: #000; color: #fff; font-size: 12px; text-align: center; position: fixed; _position: absolute; right: 10px; bottom: 100px; _bottom: "auto"; cursor: pointer; opacity: .6; filter: Alpha(opacity = 60); } </style>
<script> (function() { var $backToTopTxt = "返回顶部" $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body")).text($backToTopTxt) .attr("title", $backToTopTxt).click(function() { $("html, body").animate({ scrollTop: 0 },120); }) $backToTopFun = function() { var st = $(document).scrollTop(), winh = $(window).height(); (st > 0) ? $backToTopEle.show() : $backToTopEle.hide(); //IE6下的定位 if (!window.XMLHttpRequest) { $backToTopEle.css("top", st + winh - 166); } }; $(window).bind("scroll", $backToTopFun); $(function() { $backToTopFun(); }); })(); </script>
