JavaScript 返回顶部实例

最新推荐文章于 2023-02-02 08:53:44 发布

书香水墨

最新推荐文章于 2023-02-02 08:53:44 发布

阅读量1.6k

点赞数 5

分类专栏：前端文章标签： JS

本文链接：https://blog.csdn.net/qq_27870421/article/details/88806461

版权

前端专栏收录该内容

178 篇文章 7 订阅

订阅专栏

1 页面滚动大小

在这里插入图片描述
解释：
scrollTop:元素滚动条内的顶部隐藏部分的高度。
scrollLeft:元素滚动条内的左则隐藏部分的高度。
scrollHeight:指的是包含滚动内容的元素大小（元素内容的总高度）
scrollWidth:实际内容的宽度。

2 示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript 返回顶部实例</title>
<style>
#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
}

#myBtn:hover {
  background-color: #555;
}
</style>
</head>
<body>

<button onclick="topFunction()" id="myBtn" title="回顶部">返回顶部</button>

<div style="background-color:black;color:white;padding:30px">向下滑动</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">该实例演示了如何实现网页返回顶部效果。</div>
<script>
// 当网页向下滑动 20px 出现"返回顶部" 按钮
window.onscroll = function() {scrollFunction()};
 
function scrollFunction() {console.log(121);
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }
}
 
// 点击按钮，返回顶部
function topFunction() {
    document.body.scrollTop = 0;
    document.documentElement.scrollTop = 0;
}
</script>

</body>
</html>

3 效果

在这里插入图片描述

书香水墨

关注

5
点赞
踩
15

收藏

觉得还不错? 一键收藏
打赏
1
评论
JavaScript 返回顶部实例

1 页面滚动大小解释：scrollTop:元素滚动条内的顶部隐藏部分的高度。scrollLeft:元素滚动条内的左则隐藏部分的高度。scrollHeight:指的是包含滚动内容的元素大小（元素内容的总高度）scrollWidth:实际内容的宽度。2 示例<!DOCTYPE html><html><head><meta charset=...
复制链接

扫一扫