html 回到顶部插件,[前端插件] js返回顶部 效果实现

#goTop{

position:absolute;

display:none;

width:50px;

height:48px;

background:#fff url(static/img/gotop.png) no-repeat 16px 15px;

border:solid 1px #f9f9f8;border-radius:6px;box-shadow:0 1px 1px rgba(0, 0, 0, 0.2);cursor:pointer

}

#goTop:hover{

height:50px;

background-position:16px 16px;

box-shadow:0 1px 1px rgba(0, 0, 0, 0.3)

}

html:

Javascript:

//返回顶部

$(window).scroll(function(){

var sc=$(window).scrollTop();

var rwidth=$(window).width()+$(document).scrollLeft();

var rheight=$(window).height()+$(document).scrollTop();

if(sc>0){

$("#goTop").css("display","block");

$("#goTop").css("left",(rwidth-80)+"px");

$("#goTop").css("top",(rheight-120)+"px");

}else{

$("#goTop").css("display","none");

}

});

$("#goTop").click(function(){

$('body,html').animate({scrollTop:0},300);

});