csdn回到顶端

<! 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 >test </ title >
< script  src ="jquery-1.4.2.min.js"  type ="text/javascript" ></ script >
</ head >
< style  type ="text/css" >     
img {
border:  none;
}
input, checkbox, select, img {
vertical-align:  middle;
}
Inherited from div.wrap
.wrap {
text-align:  left;
}
body, div, label, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, p, blockquote, th, td {
list-style:  none;
}
body {
color:  #333;
font:  normal 12px/24px Helvetica, Tahoma, Arial, sans-serif;
text-align:  center;
}
body, div, label, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, p, blockquote, th, td {
list-style:  none;
}
p{
    height: 100px;
}

.top_arrow {
    border:  0 none;
    bottom:  150px;
    cursor:  pointer;
    display:  block;
    height:  auto;
    margin:  0;
    opacity:  0.5;
    padding:  0;
    position:  fixed;
    right:  40px;
    width:  35px;
    z-index:  2147483647;
}
</ style >

< body >
< p >段落1 </ p >
< p >段落2 </ p >
< p >段落3 </ p >
< p >段落4 </ p >
< p >段落5 </ p >
< p >段落6 </ p >
< p >段落7 </ p >
< p >段落8 </ p >
< p >段落9 </ p >
< p >段落10 </ p >
< p >段落11 </ p >
< p >段落12 </ p >
< p >段落13 </ p >
< p >段落14 </ p >
< p >段落15 </ p >
< img  alt ="Top_arrow"  id ="top_arrow"  class ="top_arrow"  src ="top_arrow.png"  style ="display: block; cursor: pointer;" >
< script  type ="text/javascript"  src ="top_arrow.js?20121128" ></ script >
</ body >
</ html >

js文件代码：

$(document).ready( function(){

// 首先将#top_arrow隐藏

    $("#top_arrow").hide();

// 当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失

    $( function () {
        $(window).scroll( function(){
             if ($(window).scrollTop()>100){
                $("#top_arrow").fadeIn(400);
            }
             else
            {
                $("#top_arrow").fadeOut(400);
            }
        });

// 当点击跳转链接后，回到页面顶部位置

        $("#top_arrow").click( function(){
            $('body,html').animate({scrollTop:0},400);
             return  false;
        });
    });

}); 

 

完整代码和例子下载：http://files.cnblogs.com/jackhuclan/backtop.rar 

转载于:https://www.cnblogs.com/jackhuclan/p/3242902.html