在该笔记中将学到一些常用的回到顶部的制作方法与展示效果
可以使用锚链接实现回到顶部，使用锚链接进行跳转到页面的位置上的方法有一下优缺点：
- 优点：简单快速，没有兼容性问题
- 缺点：视觉上不够直观，直接就跳转到指定位置，用户视觉体验不够好
主要知识点：
- 使用 document.documentElement.scrollTop 来读写滚动条数值
- 使用 window.onscroll 在滚动的时候触发事件
- 使用 setInterval() 函数来决定页面滚动的快慢
使用 btn.onclick，在点击按钮的时候，配合 setInterval 事件，使页面回到顶部，并且可以控制速度来使回去的速度由快变慢。在 window.onscroll 事件中监听用户在回到顶部的动作中是否滑动了滚轮，如果滑动了滚轮，则停止用户回到顶部的动作。
显示效果如下，可以根据需要修改 CSS 样式：
使用 position:fixed 和 bottom、right 进行定位
使用 position:fixed 和 top、left、bottom、right 来进行定位，兼容性不是很好：当页面的大小发生变化的时候，如果定位的距离是固定值，则定位标签不会随着页面大小的变化而变化。
代码如下：
<html>
<head>
<title>JavaScript 回到顶部</title>
<meta charset="utf-8">
<style type="text/css">
.wrap{
width:500px;
height:2000px;
margin:0 auto;
background-color:#eee;
}
#btn{
position:fixed;
bottom: 20px;
right:100px;
text-decoration:none;
color:#888;
background-color:#ccc;
}
#btn img{
width:24px;
height:26px;
}
</style>
<script>
window.onload = function() {
var btn = document.getElementById("btn");
var isMyRoll = false;
var timer = null;
//中断滚动
window.onscroll = function() {
if(isMyRoll){
clearInterval(timer);
}
isMyRoll = true;
};
btn.onclick = function() {
timer = setInterval(function(){
var disTop = document.body.scrollTop || document.documentElement.scrollTop,
speed = Math.ceil(disTop/5);
document.body.scrollTop = document.documentElement.scrollTop = disTop - speed;
isMyRoll = false;
if(disTop == 0) {
clearInterval(timer);
}
}, 30);
};
};
</script>
</head>
<body>
<div class="wrap">
<a href="JavaScript:;" id="btn"><img src="http://ofjjubwp5.bkt.clouddn.com/image/png/img27.png" alt=""></a>
</div>
</body>
</html>
使用 position:fixed 和 text-align 进行定位
使用 text-align 进行定位比较推荐，因为定位标签的位置可以随着页面大小的变化而变化：使用 position:ficed 的标签放在一个文本之后(例如：$nbsp )，此时使用 text-align 进行定位的时候，会为该文本进行自动的定位，例如使用 text-align: right 时，文本会被定位到页面的右边，此时 position:fixed 的标签也会被文本推到页面的右边，然后在页面右边的位置脱离文档流。
如果页面的大小发生变化，被 text-align: right 的文本标签也会相对页面的变化而自动改变，则 position:fixed 标签也会相对页面的变化而改变，不需要重新计算绝对定位的距离
<html>
<head>
<title>JavaScript 回到顶部</title>
<meta charset="utf-8">
<style type="text/css">
.wrap{
width:500px;
height:2000px;
margin:0 auto;
background-color:#eee;
text-align:right;
padding-top:400px;
}
#btn{
position:fixed;
text-decoration:none;
color:#888;
background-color:#ccc;
}
#btn img{
width:24px;
height:26px;
}
</style>
<script>
window.onload = function() {
var btn = document.getElementById("btn");
var isMyRoll = false;
var timer = null;
//中断滚动
window.onscroll = function() {
if(isMyRoll){
clearInterval(timer);
}
isMyRoll = true;
};
btn.onclick = function() {
timer = setInterval(function(){
var disTop = document.body.scrollTop || document.documentElement.scrollTop,
speed = Math.ceil(disTop/5);
document.body.scrollTop = document.documentElement.scrollTop = disTop - speed;
isMyRoll = false;
if(disTop == 0) {
clearInterval(timer);
}
}, 30);
};
};
</script>
</head>
<body>
<div class="wrap">
<a href="JavaScript:;" id="btn"><img src="http://ofjjubwp5.bkt.clouddn.com/image/png/img27.png" alt=""></a>
</div>
</body>
</html>