JS基础之BOM基本操作练习（返回网页顶部，吸顶条）

ZQsSpace

于 2023-02-10 16:42:07 发布

阅读量152

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/ZQsSpace/article/details/128972709

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本篇文章包含了两个基于BOM基本操作的小练习，用于进一步加强对BOM基本操作的掌握。

关于BOM的基本操作可简单参考

https://blog.csdn.net/ZQsSpace/article/details/128972147?spm=1001.2014.3001.5502

1、返回网页顶部

通过对网页滚动条进行操作，实现网页返回顶部

效果图

code

<!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>
    <style>
        #returnTop {
            cursor: pointer;
            position: fixed;
            right: 0;
            bottom: 50px;
            width: 50px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            border-radius: 25px;
            font-size: 12px;
            border: 1px solid #cacaca;
        }
    </style>
    <script>
        window.onload = () => {
            let reTop = document.querySelector("#returnTop");
            var time;

            reTop.onclick = function () {
                time = setInterval(() => {
                    // 判断滚动条是否在顶端
                    if (document.documentElement.scrollTop > 0) {
                        document.documentElement.scrollTop -= 10;
                    }
                    else {
                        document.documentElement.scrollTop = 0;
                        clearInterval(time);
                        console.log("returnTop")
                    }
                }, 10);
            }


        }
    </script>
</head>

<body>
    <div id="returnTop">返回顶部</div>
    <p>段1</p>
    <p>段2</p>
    <p>段3</p>
    <p>段4</p>
    <p>段5</p>
    <p>段6</p>
    <p>段7</p>
    <p>段8</p>
    <p>段9</p>
    <p>段10</p>
    <p>段11</p>
    <p>段12</p>
    <p>段13</p>
    <p>段14</p>
    <p>段15</p>
    <p>段16</p>
    <p>段17</p>
    <p>段18</p>
    <p>段19</p>
    <p>段20</p>
    <p>段21</p>
    <p>段22</p>
    <p>段23</p>
    <p>段24</p>
    <p>段25</p>
    <p>段26</p>
    <p>段27</p>
    <p>段28</p>
    <p>段29</p>
    <p>段30</p>
    <p>段31</p>
    <p>段32</p>
    <p>段33</p>
    <p>段34</p>
    <p>段35</p>
    <p>段36</p>
    <p>段37</p>
    <p>段38</p>
    <p>段39</p>
    <p>段40</p>
    <p>段41</p>
    <p>段42</p>
    <p>段43</p>
    <p>段44</p>
    <p>段45</p>
    <p>段46</p>
    <p>段47</p>
    <p>段48</p>
    <p>段49</p>
    <p>段50</p>
    <p>段51</p>
    <p>段52</p>
    <p>段53</p>
    <p>段54</p>
    <p>段55</p>
    <p>段56</p>
    <p>段57</p>
    <p>段58</p>
    <p>段59</p>
    <p>段60</p>
    <p>段61</p>
    <p>段62</p>
    <p>段63</p>
    <p>段64</p>
    <p>段65</p>
    <p>段66</p>
    <p>段67</p>
    <p>段68</p>
    <p>段69</p>
    <p>段70</p>
</body>

</html>

2、吸顶条

通过对网页滚动条进行操作，和修改顶条的定位，实现position:sticky相同的效果

效果图

code

<!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>吸顶条</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        header {
            /* 粘性定位，浏览器低版本不可用 */
            /* position: sticky; */
            position: relative;
            top: 0;
            width: 100%;
            height: 50px;
            background-color: orange;
        }

        .toFixed {
            position: fixed;
        }

        p {
            line-height: 32px;
        }
    </style>
</head>

<body>
    <header></header>
    <p>p01</p>
    <p>p02</p>
    <p>p03</p>
    <p>p04</p>

    <p>p05</p>
    <p>p06</p>
    <p>p07</p>
    <p>p08</p>
    <p>p09</p>
    <p>p10</p>
    <p>p11</p>
    <p>p12</p>
    <p>p13</p>
    <p>p14</p>
    <p>p15</p>
    <p>p16</p>
    <p>p17</p>
    <p>p18</p>
    <p>p19</p>
    <p>p20</p>
    <p>p21</p>
    <p>p22</p>
    <p>p23</p>
    <p>p24</p>
    <p>p25</p>
    <p>p26</p>
    <p>p27</p>
    <p>p28</p>
    <p>p29</p>
    <p>p30</p>
    <script>
        let header = document.querySelector("header");
        let high = header.offsetTop
        window.onscroll = () => {
            // 获取滚动条顶部距离
            let Top = document.documentElement.scrollTop;
            // console.log(Top);
            if (Top > high) {
                header.classList.add("toFixed");
            } else {
                header.classList.remove("toFixed");
            }
        }

    </script>
</body>

</html>

新手上路，如有错误，望大佬们指正。

ZQsSpace

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS基础之BOM基本操作练习（返回网页顶部，吸顶条）

JS基础之BOM基本操作练习（返回网页顶部，吸顶条）；本篇文章包含了两个基于BOM基本操作的小练习，用于进一步加强对BOM基本操作的掌握。关于BOM的基本操作可简单参考。
复制链接

扫一扫

专栏目录