当前位置: 移动技术网 > IT编程>网页制作>Html5 > 返回顶部写法

返回顶部写法

2018年08月20日  | 移动技术网IT编程  | 我要评论

 

<!--jsp写入 回到顶部--!>

<div style="overflow: hidden;position: fixed;right: 10px;bottom: 20px;z-index: 10;">
<div style="overflow: hidden;">
<div style="padding-top:20px;padding-right:50px;padding-bottom:50px;">
<a href="#" style="float: right;display:none" class="btns maodian" id="gototop" >回到顶部</a>
</div>
</div>
</div>

<!--js写入--!>

$(function(){

//当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
$(function () {
$(window).scroll(function(){
if ($(window).scrolltop()>100){
$("#gototop").fadein();
}
else
{
$("#gototop").fadeout();
}
});

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

$('#gototop a').click(function(){
$('html,body').animate({scrolltop:0},'slow');
});

});



})

 

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网