代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.11.1/jquery.js"></script><style>
p#top{ position:fixed;display:none;bottom:100px;right:80px;}
p#top a{text-align:center;text-decoration:none;color:#d1d1d1;display:block;width:64px;transition:color 1s;}
p#top a:hover{ color:#979797; }
p#top a span{background:url(top.png) no-repeat center;border-radius:6px;display:block;height:64px;transition:background 1s;}
#top a:hover span{background:url(top.png) no-repeat center;}
</style>
<script>
$(document).ready(function(e) {
//当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失
$(function () {
$(window).scroll(function(){
if ($(window).scrollTop()>100){ //大于100行才出现跳转箭头
$("#top").fadeIn(1500); //大于1500行时跳转箭头慢慢透明显示
}
else
{
$("#top").fadeOut(1500); //大于1500行时跳转箭头慢慢透明消失
}
});
//当点击跳转链接后，回到页面顶部位置
$("#top").click(function(){
$('body,html').animate({scrollTop:0},1000);//1s完成回到顶部
return false;
});
});
});
</script>
</head>
<body>
<div style="width: 100%;height: 2000px;"></div>
<p id="top">
<a href="#top">
<span></span>
返回顶部
</a>
</p>
</body>
</html>
本文地址：https://www.moyublog.com/notes/683.html
加入我们：微信：搜索“Moyu-Blog” 帝国CMS模板客户群：QQ二群---909235407 QQ一群(已满)---106997031
版权声明：本文采用[BY-NC-SA]协议进行授权,如无特别说明,转载请注明本文地址!
