回到顶部的方法
作者:互联网
思路:
【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> <div class="content"> <h2>返回首屏</h2> <div class="goTop">返回</div> </div> </body> <script> //思路 // 1.让元素浮动页面,始终处于屏幕的中心位置 // 2.获取页面向下滚动的数据 //3.网页上的每个元素,都有clientHeight和clientWidth属性 //4.网页上的每个元素还有scrollHeight和scrollWidth属性 //5.每个元素都有offsetTop和offsetLeft属性,表示该元素的左上角与父容器(offsetParent对象)左上角的距离 // console.log(divHeight.scrollHeight);//元素的高度 // console.log(divHeight.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 divHeight = 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方法滚动当前元素,进入浏览器的可见区域 divHeight.scrollIntoView(); getHeight(); }) </script> </html>
标签:body,顶部,滚动条,回到,文档,goTop,scrollTop,document,方法 来源: https://www.cnblogs.com/james0910/p/15535141.html