有没有感觉，当你的页面过长的时候，回到顶部得慢慢移动鼠标，很不方便，现在介绍一种方法：用Jquery代码来实现“返回顶部”，在最顶端的时候是不会显示“返回顶部”的，当你向下查看页面的时候，会在右底出现“返回顶部”的快捷移动方式。
这个功能的实现，你需要做三个方面的工作。
一、在style.css里面增加如下修饰“返回顶部”的代码。
.backToTop {
display: block;
width: 18px;
line-height: 1.2;
padding: 10px 5px;
background-color: #123;
color:#fff;
font-size: 14px;
font-weight:bold;
text-align: center;
position: fixed;
_position: absolute;
right: 0px;
bottom: 100px;
_bottom: "auto";
cursor: pointer;
opacity: .6;
filter: Alpha(opacity=60);
}
二、实现“返回顶部”的Jquery代码：
<script type="text/javascript">
(function() {
var $backToTopTxt = "返回顶部", $backToTopEle = $('<div></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>
三、当然还要加载jquery-1.7.1.min.js，你可以从Jquery的官网下载最新版的库。
呵，做好了这三步，你可以到单本小说《大圣传》（http:/xs.ituibar.com）查看效果。
2 comments