html 点击滚动到🈯️ 定元素 动态判断是否滚动到哪个元素位置
重新更新了代码,格式化了一下,微调了一下
<!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> <body onload="loadFinish()"> <div class="aa"> <span style="font-size: 50px;"> A </span> <button onclick="test('cc')">滚动到c</button> <button onclick="test('dd')">滚动到d</button> </div> <div class="bb"> <span style="font-size: 50px;"> B </span> </div> <div class="cc" id="cc"> <span style="font-size: 50px;"> C </span> </div> <div class="dd" id="dd"> <span style="font-size: 50px;"> D </span> </div> </div> </body> <script> window.onscroll = function () { //为了保证兼容性,这里取两个值,哪个有值取哪一个 //scrollTop就是触发滚轮事件时滚轮的高度 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // console.log("滚动距离" + scrollTop); checkElementExist(scrollTop, "cc") checkElementExist(scrollTop, "dd") } function loadFinish() { console.log(" 页面加载完成 ") } function checkElementExist(scrollTop, id) { var windowHeight = document.documentElement.clientHeight // 视窗高度-也就是浏览器可视区域高度 var curh = windowHeight + scrollTop var cccurh = getElementTopByScroll(id) var cch = document.getElementById(id).offsetHeight // console.log("window height " + windowHeight + " croll " + scrollTop + " all height " + curh) if (curh - cccurh > 10 && curh - cccurh < cch) { console.log("已滚动到区域: " + id) } } function test(data) { console.log(data) ScrollToControl(data); } function getElementTopByScroll(id) { var elem = document.getElementById(id); var scrollPos = elementPosition(elem).y; return scrollPos } function elementPosition(obj) { var curleft = 0, curtop = 0; if (obj.offsetParent) { curleft = obj.offsetLeft; curtop = obj.offsetTop; while (obj = obj.offsetParent) { curleft += obj.offsetLeft; curtop += obj.offsetTop; } } return { x: curleft, y: curtop }; } function ScrollToControl(id) { var elem = document.getElementById(id); var scrollPos = elementPosition(elem).y; scrollPos = scrollPos - document.documentElement.scrollTop; var remainder = scrollPos % 50; var repeatTimes = (scrollPos - remainder) / 50; ScrollSmoothly(scrollPos, repeatTimes); window.scrollBy(0, remainder); } var repeatCount = 0; var cTimeout; var timeoutIntervals = new Array(); var timeoutIntervalSpeed; function ScrollSmoothly(scrollPos, repeatTimes) { if (repeatCount < repeatTimes) { window.scrollBy(0, 50); } else { repeatCount = 0; clearTimeout(cTimeout); return; } repeatCount++; cTimeout = setTimeout("ScrollSmoothly('" + scrollPos + "','" + repeatTimes + "')", 10); } </script> <style> .aa { height: 500px; width: 100%; background-color: aqua; } .bb { height: 500px; width: 100%; background-color: blueviolet; } .cc { height: 500px; width: 100%; background-color: burlywood; } .dd { height: 500px; width: 100%; background-color: rgba(73, 84, 238, 0.842); } </style> </html>