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>
