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

js实现 回到网页顶部 效果

2013-11-23 10:54 766 查看
实现效果：当页面内容比较多的时候，会出现滚动条，通过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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航