您的位置：首页 > Web前端 > JavaScript

使用JS实现一个匀速回到顶部的效果

2017-12-23 16:46 931 查看


使用Jquery的回到顶部方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--百度在线压缩地址-->
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<style>

*{
margin:0;
padding:0;
}
/*今日头条的右侧按钮设计思路:先给按钮设计一个固定定位,离顶部距离固定,离左边位置为50%
加上一定的margin值*/
#but{
width: 200px;
/*background: yellow;*/
padding-left:130px;
box-sizing: border-box;
position:fixed;
left: 50%;
top: 600px;
margin-left: 470px;
}
#but button{
width: 70px;
display: none;
}
.content{
width: 1200px;
background: skyblue;
margin:0 auto;
}
</style>
</head>
<body>
<div class="content">
<h1>00000001</h1>
<h1>00000002</h1>
<h1>00000003</h1>
<h1>00000004</h1>
<h1>00000005</h1>
<h1>00000006</h1>
<h1>00000007</h1>
<h1>00000008</h1>
<h1>00000009</h1>
<h1>00000010</h1>
<h1>00000011</h1>
<h1>00000012</h1>
<h1>00000013</h1>
<h1>00000014</h1>
<h1>00000015</h1>
<h1>00000016</h1>
<h1>00000017</h1>
<h1>00000018</h1>
<h1>00000019</h1>
<h1>00000020</h1>
<h1>00000021</h1>
<h1>00000022</h1>
<h1>00000023</h1>
<h1>00000024</h1>
<h1>00000025</h1>
<h1>00000026</h1>
<h1>00000027</h1>
<h1>00000028</h1>
<h1>00000029</h1>
<h1>00000030</h1>
<h1>00000031</h1>
<h1>00000032</h1>
<h1>00000033</h1>
<h1>00000034</h1>
<h1>00000035</h1>
<
4000
h1>00000036</h1>
<h1>00000037</h1>
<h1>00000038</h1>
<h1>00000039</h1>
<h1>00000040</h1>
<h1>00000041</h1>
<h1>00000042</h1>
<h1>00000043</h1>
<h1>00000044</h1>
<h1>00000045</h1>
<h1>00000046</h1>
<h1>00000047</h1>
<h1>00000048</h1>
<h1>00000049</h1>
<h1>00000050</h1>
<h1>00000051</h1>
<h1>00000052</h1>
<h1>00000053</h1>
<h1>00000054</h1>
<h1>00000055</h1>
<h1>00000056</h1>
<h1>00000057</h1>
<h1>00000058</h1>
<h1>00000059</h1>
<h1>00000060</h1>
</div>
<div id="but">

<button id="bt">回到顶部</button>

</div>

<script>
//默认的回到顶部按钮是隐藏的,我们要先获取滚动条离顶部的高度,超过100px就设置为显示
//当页面滚动条发生滚动的时候,window 或者document 都可以
$(document).scroll(
function(){
//判断,滚动条的高度
if($(document).scrollTop() > 100){
$("#but button").show();
}else{
$("#but button").hide();
}
}
);
$("#bt").click(function(){
$('body,html').animate({scrollTop:0},300);
return false;
});
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航