页面载入中,请稍候...

返回顶部的js实现(jQuery)

2012-05-20 13:57:26    作者:user    来源:会员投稿    评论:读取中    点击:读取中    [我要投稿]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><h...
<!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=utf-8" />
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<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>
 </head>

 <body>
  <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>



<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />
<br /><br /><br /><br />

 </body>
</html>


     

相关热词搜索:返回   顶部   实现  

上一篇:jQuery一句话实现多选框全选/取消
下一篇:jQuery实现选项卡效果

分享到: 收藏