发布时间：2025-12-09 11:55:34 浏览次数：1
思路:
【1】获取屏幕滚动条的高度
通过document.documentElement.scrollTop来获取滚动条距离最顶端的距离(0 ~ 文档高度减去滚动条长度)【2】通过函数function getHeight()来判断显示还是隐藏回到顶部的菜单【3】通过window.onscroll监听页面滚动的方<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> * { margin: 0; padding: 0; } .content { height: 2000px; } .goTop { width: 100px; height: 100px; background-color: #bbb; text-align: center; line-height: 100px; /* position:fixed 相对于窗口的固定定位 */ /* 元素在文档滚动时不会在浏览器视察中移动 */ position: fixed; bottom: 100px; right: 20px; display: none; }</style><body> <p > <h2>返回首屏</h2> <p >返回</p> </p></body><script> //思路 // 1.让元素浮动页面,始终处于屏幕的中心位置 // 2.获取页面向下滚动的数据 //3.网页上的每个元素,都有clientHeight和clientWidth属性 //4.网页上的每个元素还有scrollHeight和scrollWidth属性 //5.每个元素都有offsetTop和offsetLeft属性,表示该元素的左上角与父容器(offsetParent对象)左上角的距离 // console.log(pHeight.scrollHeight);//元素的高度 // console.log(pHeight.offsetTop); // console.log(document.body.clientHeight);//获取屏幕的高度 // document.documentElement.scrollTop //滚动条距离最顶端的距离(0 ~ 文档高度减去滚动条长度) // document.documentElement.scrollLeft //滚动条的left (一般是0) !这两个只有Top和Left没有bottom和Right; // document.documentElement.clientWidth // 可见区域宽度(浏览器窗口的宽) // document.documentElement.clientHeight // 可见区域高度(浏览器窗口的高) // document.body.clientHeight //body的 高度(文档的高度) // document.body.clientWidth //body的宽度(文档的宽度) // document.body.scrollHeight //body的高度(跟人理解为与文档高度相同) // document.body.scrollWidth //body的宽度(跟人理解为与文档宽度相同) //window.pageYOffset滚动条的位置 //************************************************************************************************************* //1.获取元素 let pHeight = document.querySelector('.content'); let goTop = document.querySelector('.goTop'); //console.log(goTop); //2.获取屏幕滚动条的高度 function getHeight() { let flag = document.documentElement.scrollTop || document.body.scrollTop; if (flag >= 1000) { goTop.style.display = "block"; } else { goTop.style.display = "none"; } } //原生js通过window.onscroll监听页面滚动的方法 window.onscroll = getHeight; //给返回绑定事件 goTop.addEventListener('click', function () { //由于scrollTop是可写的,可以利用scrollTop来实现回到顶部的功能 //document.body.scrollTop = document.documentElement.scrollTop = 0 //scrollTo(x,y)方法滚动当前window中显示的文档,让文档中由坐标x和y指定的点位于显示区域的左上角 //scrollTo(0, 0); //Element.scrollIntoView方法滚动当前元素,进入浏览器的可见区域 pHeight.scrollIntoView(); getHeight(); })</script></html>
免责声明：本站内容（文字信息+图片素材）来源于互联网公开数据整理或转载，仅用于学习参考，如有侵权问题，请及时联系本站删除，我们将在5个工作日内处理。联系邮箱：303555158#qq.com（把#换成@）
微信便捷交流