王志广的个人分享

        王志广的个人分享 >> JS >> 仿新浪网返回头部

仿新浪网返回头部

admin发表于2013-01-29  4,254次浏览 标签: 

整理了新浪网返回头部的特效,和其他返回头部相比,这个代码简洁,而且很容易理解,独立运行,不需要特殊条件,直接复制上去就可以运行,省去了我们套js代码的时间,也可以对其加以更改,设计出更美观的网页特效。代码可以直接复制运行。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>仿新浪网返回头部</title>
<meta http-equiv=”content-type” content=”text/html;charset=utf-8″>
<style type=”text/css”>
.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 type=”text/javascript” src=”http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js”></script>
</head>
<body>
<div style=”height:2000px;”></div>
<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>
</body>
</html>

你可以发表评论引用到你的网站或博客,或通过RSS 2.0订阅这个日志的所有评论。
上一篇:
下一篇:
没有评论
我来说两句

  Ctrl+Enter