-
智能的“回到顶部”特效，将网页的滚动条拖至网页的最底部后，右下角会出现“回到顶部”的文字链接，点击一下就可以回到网页的最顶端，目前在不少的大网站都有此项功能。本代码使用了jQuery插件，代码运行更稳定，而且兼容性也不错。
-
<html>
-
<head>
-
<title></title>
-
<script language="javascript" src="/ajaxjs/jquery-1.6.2.min.js"></script>
-
<script language="javascript">
-
$(function(){
-
var $backToTopTxt = "返回顶部", $backToTopEle = $('').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>
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
-
<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>
-
</head>
-
<body>
-
-
<p>往下拉，才会出来</p>
-
<p>往下拉，才会出来</p>
-
<p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p>
-
<p>往下拉，才会出来</p>
-
<p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p><p>往下拉，才会出来</p>
-
</body>
-
</html>
阅读(377) | 评论(0) | 转发(0) |
