实现效果：当页面内容比较多的时候，会出现滚动条，通过js代码做了一个实现 回到网页顶部 的功能，而且回到顶部的速度是逐步增加的。
思路：1、首先定义一个 回到网页顶部的链接标签，
2、获取这个链接标签对象，然后给它添加一个事件监听器
3、核心是监听器中定义的操作
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style>
body{
background-image:url(aa.jpg);
transition:5s;
}
</style>
</head>
<body >
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p><p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<p>
aaaaaaaa
</p>
<a class="gotop" href="javascript:;" >back to top</a>
<script>
//利用js原生的选择器获取js对象
var gotopObj = document.querySelector(".gotop");
//给gotopObj对象添加一个事件监听器，监听的是click点击事件
gotopObj.addEventListener("click",downListener,false);
function downListener(ev){ //ev代表一个当前触发的事件
//alert(window.screen.availHeight);
var bottom = ev.pageY;//网页的高度
var top = 0;//设置顶部的位置
//var screenH = document.body.clientHeight;
//alert(screenH);
var scale = bottom - top;
var time = 500;//回到顶部所花的总时间
var av = scale/time*10;//每次上升滑动的距离
//定义一个定时器，即每隔10毫秒执行一次上升滑动的操作
var interval = window.setInterval(function(){
av++;//控制逐步加速
window.scrollBy(0,-av);//第一个参数表示滚动条移动的水平像素，第二个参数表示滚动条移动的垂直像素
},10);
window.setTimeout(function(){
window.clearInterval(interval);//取消指定的 window.setInterval函数将要执行的代码,500毫秒之后取消
},time);
}
</script>
</body>
</html>
4723
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
