js实现返回顶部的实例详解

js实现返回顶部

网页中，返回顶部很普遍。现有一例子，主要靠图片 + jquery + CSS来完成：

效果：
1、页面在顶部或滚动到顶部时，“返回顶部”图片隐藏
2、当页面向下滚动时，“返回顶部”图片显现
3、鼠标未在“返回顶部”图片上面时，图片是灰的
4、鼠标移到“返回顶部”图片上面时，图片置亮（红色）
 

方法和代码：
1、有图片（/img/back_top.png）：

2、JS代码

/*返回顶部*/  
var right = ($(window).width() - 1070) / 2 + "px";  
var $backToTopTxt = "返回顶部"  
, $backToTopEle = $('<div id="divBackTop"></div>').appendTo($("body")).css("right", right).attr("title", 
$backToTopTxt).click(function () { $("html, body").animate({ scrollTop: 0 }, 120); })  // www.jb200.com
, $backToTopFun = function () {  
    var st = $(document).scrollTop(), winh = $(window).height();  
    (st > 0) ? $backToTopEle.fadeIn(2000) : $backToTopEle.fadeOut(2000);  
    //IE6下的定位  
    if (!window.XMLHttpRequest) {  
        $backToTopEle.css("top", st + winh - 166);  
    }  // js实现 返回顶部
};  
$backToTopEle.mouseover(function () { $backToTopEle.removeClass(); $backToTopEle.addClass("gtop2"); });  
$backToTopEle.mouseout(function () { $backToTopEle.removeClass(); $backToTopEle.addClass("gtop"); });  
$(window).bind("scroll", $backToTopFun);  
$(function () {  
    $backToTopFun();  
});  

3、CSS

#divBackTop {  
    display: none;  
    width: 45px;  
    height:45px;  
    background:url(/img/back_top.png) no-repeat left center;  
    position: fixed;  
    _position: absolute;  
    right: 10px;  
    bottom: 100px;  
    _bottom: "auto";  
    cursor: pointer;  
}  
.gtop{background:url(/img/back_top.png) no-repeat left center!important;}  
.gtop2{background:url(/img/back_top.png) no-repeat right center!important;}