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>

　　

posted @ 2022-05-15 17:40  人间春风意  阅读(503)  评论(0)    收藏  举报