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

(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(); });
		})();

 

 

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);
}

 

 

<p>如果预览时左下角提示错误，<font color=red>请先刷新一下本页面</font>就可以看到效果了。</p>
<p>  拖动滚动条到页面底部就会显示“返回顶部”按钮。</p>
<p></p>
<div style="height:2000px;"></div>

  

 

把JS代码 写在HTML下面