描述:当用户滑动页面的时候,页面右下角显示返回顶部的小火箭,每当用户点击此小火箭的时候,页面换范返回到页面的顶端。该小火箭是一张图片,用户只需要换成自己的图片即可。
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部的小火箭</title>
<style>
img {
position: fixed;
bottom: 100px;
right: 50px;
cursor: pointer;
display: none;
}
div {
width: 1210px;
margin: 0 auto;
height: 5000px;
}
</style>
</head>
<body>
<img src="images/Top.jpg"/>
<div></div>
</body>
</html>
<script>
//获取相关元素,得到点击返回顶部的小火箭
var img = document.getElementsByTagName("img")[0];
//控制小火箭的显示和隐藏
window.onscroll = function () {
if(scroll().top>100){
img.style.display="block";
}else{
img.style.display="none";
}
leader = scroll().top;
}
var timer = null;
//顶部距离
var target = 0;
//距离顶部的位置
var leader = 0;
//点击之后调用动画函数,使得页面上移
img.onclick = function () {
clearInterval(timer);
timer = setInterval(function () {
var step = (target-leader)/10;
step = step>0?Math.ceil(step):Math.floor(step);
leader=leader+step;
/*scrollTo(xpos,ypos)
参数 描述
xpos 必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
ypos 必需。要在窗口文档显示区左上角显示的文档的 y 坐标。*/
window.scrollTo(0,leader);
if(leader===0){
clearInterval(timer);
}
},25);
}
function scroll(){
return {
"top": window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop,
"left": window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft
}
}
</script>