仿新浪网“返回顶部”效果

2020-01-27 13:43:45

字体：大中小

来源：转载

供稿：网友

仿新浪网“返回顶部”效果，网上的一段代码，太长了，导致在应用的时候跟其它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=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>如果预览时左下角提示错误，请刷新一下就可以看到效果了。<br><div style="height:2000px;"></div><script type="text/javascript">(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></body></html>

上一篇：加入收藏夹代码

下一篇：禁止右键，禁止选中，禁止网页复制的Js代码

学习交流

phpwind的rewrite重写原理

phpwind的rewrite重写原理...

热门图片

猜你喜欢的新闻

猜你喜欢的关注