引入JS代码:
$(function(){
//当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
$(function () {
$(window).scroll(function(){
if ($(window).scrollTop()>100){
$("#backtop").css("bottom","1px");
}
else
{
$("#backtop").css("bottom","-100px");
}
});
//当点击跳转链接后,回到页面顶部位置
$("#backtop").click(function(){
//$('body,html').animate({scrollTop:0},1000);
if ($('html').scrollTop()) {
$('html').animate({ scrollTop: 0 }, 1000);
return false;
}
$('body').animate({ scrollTop: 0 }, 1000);
return false;
});
});
});
CSS部分:
把效果图保存,上传到服务器然后替换返回顶部图片链接
#backtop {
position: fixed;
right: 7.5%;
bottom: -100px;
z-index: 2;
overflow: auto;
width: 54px;
height: 54px;
border-top-right-radius: 50px;
border-top-left-radius: 50px;
background-image: url(返回顶部图片链接);
background-position: 0 0;
cursor: pointer;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out
}
html部分:
<div id="backtop" title="返回顶部" style="bottom: -100px;"></div>
“免责声明: 本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!”