一、a 标签链接 Id 的方法
<h1 id= "headtop">我是顶部</h1>
<div class="box"><a href="#headtop">回到顶部</a></div>
此种方法没什么特效过程，几乎是直接到顶。
二、构造滚动动画
页面回到顶部.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>页面回到顶部</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #7bef32;
position: fixed;
right: 20px;
top: 7000px;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<h1 id= "headtop">我是顶部</h1>
<img src="images/shutter/rayli01.png" alt=""><br>
<img src="images/shutter/rayli02.jpg" alt=""><br>
<img src="images/shutter/rayli03.jpg" alt=""><br>
<img src="images/shutter/rayli04.jpg" alt=""><br>
<img src="images/shutter/rayli05.jpg" alt=""><br>
<img src="images/shutter/rayli06.jpg" alt=""><br>
<img src="images/shutter/rayli01.png" alt=""><br>
<img src="images/shutter/rayli02.jpg" alt=""><br>
<img src="images/shutter/rayli03.jpg" alt=""><br>
<img src="images/shutter/rayli04.jpg" alt=""><br>
<img src="images/shutter/rayli05.jpg" alt=""><br>
<img src="images/shutter/rayli06.jpg" alt=""><br>
<div class="box" id = "box">回到顶部</div>
<script>
var box = document.getElementById("box");
window.onscroll = function(){
var win_scrol = document.body.scrollTop || document.documentElement.scrollTop;
if(win_scrol>700){
box.style.top = 700 +"px";
}else{
box.style.top = 7000 +"px";
}
}
box.onclick = function(){
scrollAnimate(0,1000);
}
function scrollAnimate(target,time){
var frameNumber = 0; //帧编号
var start = document.body.scrollTop || document.documentElement.scrollTop; //起点
var distance = target - start;
var interval = 10;
var maxFrame = time / interval;
clearInterval(timer);
var timer = setInterval(function(){
frameNumber++;
if(frameNumber == maxFrame){
clearInterval(timer);
}
//第一个参数t表示当前帧编号
//第二个参数b表示起始位置
//第三个参数c表示变化量
//第四个参数d表示总帧数
//返回当前帧应该在哪儿
document.body.scrollTop = document.documentElement.scrollTop = CubicEaseInOut(frameNumber,start,distance,maxFrame);
},interval);
}
function CubicEaseInOut(t, b, c, d) {
if ((t /= d / 2) < 1) return c / 2 * t * t * t + b;
return c / 2 * ((t -= 2) * t * t + 2) + b;
}
</script>
</body>
</html>
