jquery 控制返回顶部 支持各浏览器 可简单集成

jquery 控制返回顶部 支持各浏览器 可简单集成

1、先发效果图  

2、上页面

<! 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 >
< meta http - equiv = " Content-Type "  content = " text/html; charset=gbk "   />
< title > Back to To TEST </ title >
< LINK rel = stylesheet type = text / css href = " css/lrtk.css " >
< script src = " js/jquery.js " ></ script >
< script type = " text/javascript " >
$(function()  {
    $(window).scroll(function() {
        if($(this).scrollTop() != 0) {
            $('#toTop').fadeIn();    
        } else {
            $('#toTop').fadeOut();
        }
    });
 
    $('#toTop').click(function() {
        $('body,html').animate({scrollTop:0},2000);
        return false;//返回false可以避免在原链接后加上# 
    });    
} );
</ script >
</ head >
< body >
< div style = " DISPLAY: none "  id = " toTop " >< IMG border = 0  src = " images/top.gif " ></ div >


< div id = " main "  style = " width:1000px;padding-top:200px;height:2000px;background:#eee; margin:0 auto;text-align:center " >
   < h1 > 请滚动右侧滚动条查看效果 </ h1 >
</ div >

</ body >
</ html >

3、CSS 代码

#toTop {
POSITION: fixed;
TEXT-ALIGN: center;
LINE-HEIGHT: 30px;
WIDTH: 60px;
BOTTOM: 65px;
HEIGHT: 63px;
FONT-SIZE: 12px;
CURSOR: pointer;
RIGHT: 30px;
_position: absolute;
_right: auto
}

示例地址： /Files/ityouknow/back_top.zip