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

javascript实现页面中回到顶部功能

2016-09-20 11:37 771 查看
当一个页面比较长的时候，在下拉页面到一定长度的时候，页面右下角通常会出现一个回到顶部的图标，点击即可以回到页面顶部，本案例对这一功能进行了简单实现。当页面下拉到一定长度后，页面右下角出现一个回到顶部图标，点击之后，页面会滑动到页面顶部，同时回到顶部图标也会消失。适合初学者参考。

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.return-top{
width:100px;
height:100px;
font:bold 50px/100px "宋体";
color:#fff;
background-color:purple;
position:fixed;
bottom:20px;
right:20px;
text-align:center;
cursor:pointer;
display:none;
}
.return-top.active{
display:block;
}
</style>
</head>
<body>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<h1>大鹏一日同风起，扶摇直上九万里。</h1>
<div class="return-top" id="return_top">▲</div>
<script>
/*
思路：
第一步：当页面加载完后，获取所要操作的 节点对象
第二步：为window对象添加一个滚动条滚动事件onscroll
第三步：
在滚动条滚动的过程中，不断的获取滚动条距离顶部的距离数值
当这个数值大于300的时候，显示出回到顶部图标
否则，隐藏回到顶部图标
第四步：
为回到顶部图标添加一个点击事件，滚动条回到顶部。
*/
var return_top = document.getElementById("return_top");
var sTop;
window.onscroll = function(){
//sTop :滚动条距离顶部的距离数值
sTop = document.body.scrollTop||document.documentElement.scrollTop;
if(sTop>300){
return_top.className = "return-top active";
}else{
return_top.className = "return-top";
}
}

return_top.onclick = function(){
var termId = setInterval(function(){
sTop-=50;
if(sTop<=0){

clearInterval(termId);
}
window.scrollTo(0,sTop);

},1);
}
</script>
</body>
</html>


本案例对回到顶部功能进行了简单实现，读者可以运行代码查看效果。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript
相关文章推荐
新的分享
章节导航