仿新浪網(wǎng)“返回頂部”效果

2024-09-05 12:18:12

字體：大中小

供稿：網(wǎng)友

仿新浪網(wǎng)“返回頂部”效果，網(wǎng)上的一段代碼，太長了，導(dǎo)致在應(yīng)用的時(shí)候跟其它JS代碼發(fā)生沖突不能正常使用，很不錯(cuò)的返回頂部代碼，棄之可惜，或許有的朋友能用得上，高手也可以拿出精簡一下代碼了。

<!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>仿新浪網(wǎng)“返回頂部”效果</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><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://www.codefans.net/ajaxjs/jquery-1.4.2.min.js"></script></head><body>如果預(yù)覽時(shí)左下角提示錯(cuò)誤，請刷新一下就可以看到效果了。<br><div style="height:2000px;"></div><script type="text/javascript">(function() {    var $backToTopTxt = "返回頂部", $backToTopEle = $('<div   id="iwvjtn8m0"   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></body></html>

上一篇：禁止右鍵，禁止選中，禁止網(wǎng)頁復(fù)制的Js代碼

下一篇：加入收藏夾代碼