document.write("");

html 点击滚动到🈯️ 定元素 动态判断是否滚动到哪个元素位置

 

重新更新了代码，格式化了一下，微调了一下

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!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 @   人间春风意  阅读(477)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示
AI IDE Trae

距今时间：
1025天8.00 小时 37.94 分钟

当前新增阅读数：140327