Web JS实现页面返回顶部

最新推荐文章于 2024-03-19 10:15:00 发布

RoyalMjz

最新推荐文章于 2024-03-19 10:15:00 发布

阅读量4.6k

点赞数 2

分类专栏： Web 文章标签： javascript web

本文链接：https://blog.csdn.net/royal_mjz/article/details/70139300

版权

Web 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

右下角“返回顶部“按钮

之前写博客的时候加了个返回顶部的功能

采用js的scrollTop属性实现了一下这个简单的功能

当页面特别长的时候，用户想回到页面顶部，必须得滚动好几次滚动键才能回到顶部，如果在页面右下角有个“返回顶部”的按钮，用户点击一下，就可以回到顶部，对于用户来说，是一个比较好的体验。

原理：当页面加载的时候，把返回顶部按钮定位到页面的右下角，当页面从顶部向下滑动不超过300px时，返回顶部按钮隐藏，当页面从顶部向下滑动超过300px时，返回顶部按钮显示，当用户点击返回顶部按钮的时候，页面返回顶部。

通过下面这段js代码就能够实现上述的功能。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>槑头脑的博客</title>
</head>

<body>
<div id="to_top" title="返回顶部">
  <img src="images/top.png" width="40" height="40" />
</div>
</body>

<style>
body{margin:0; padding:0}
#to_top{right: 30px; bottom: 30px; position: fixed; cursor: pointer;}
</style>

<script>
window.onscroll = function(){

  var distance = document.documentElement.scrollTop || document.body.scrollTop; //距离页面顶部的距离

  if( distance >= 300 ) { //当距离顶部超过300px时，显示图片
    document.getElementById('to_top').style.display = "";
  } else { //距离顶部小于300px，隐藏图片
    document.getElementById('to_top').style.display = "none";
  }

  var toTop = document.getElementById("to_top"); //获取图片所在的div

  toTop.onclick = function(){ //点击图片时触发的点击事件
    document.documentElement.scrollTop = document.body.scrollTop = 0; //页面移动到顶部
  }
}
</script>
</html>

下面是返回按钮的图片

共

同

进

步

O(∩_∩)O

RoyalMjz

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
Web JS实现页面返回顶部

采用js的scrollTop属性实现了一下这个简单的功能当页面特别长的时候，用户想回到页面顶部，必须得滚动好几次滚动键才能回到顶部，如果在页面右下角有个“返回顶部”的按钮，用户点击一下，就可以回到顶部，对于用户来说，是一个比较好的体验。
复制链接

扫一扫