回到顶部的方法

2023-12-29 23:04:58
思路:
【1】获取屏幕滚动条的高度
通过document.documentElement.scrollTop来获取滚动条距离最顶端的距离（0 ~ 文档高度减去滚动条长度）【2】通过函数function getHeight()来判断显示还是隐藏回到顶部的菜单 【3】通过window.onscroll监听页面滚动的方
<!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>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    .content {
        height: 2000px;
    }

    .goTop {
        width: 100px;
        height: 100px;
        background-color: #bbb;
        text-align: center;
        line-height: 100px;

        /* position:fixed 相对于窗口的固定定位 */
        /* 元素在文档滚动时不会在浏览器视察中移动 */
        position: fixed;
        bottom: 100px;
        right: 20px;
        display: none;
    }
</style>

<body>
    <div class="content">
        <h2>返回首屏</h2>
        <div class="goTop">返回</div>
    </div>
</body>
<script>
    //思路

    // 1.让元素浮动页面,始终处于屏幕的中心位置
    // 2.获取页面向下滚动的数据
    //3.网页上的每个元素，都有clientHeight和clientWidth属性
    //4.网页上的每个元素还有scrollHeight和scrollWidth属性
    //5.每个元素都有offsetTop和offsetLeft属性，表示该元素的左上角与父容器（offsetParent对象）左上角的距离
    // console.log(divHeight.scrollHeight);//元素的高度
    // console.log(divHeight.offsetTop);
    // console.log(document.body.clientHeight);//获取屏幕的高度
    // document.documentElement.scrollTop //滚动条距离最顶端的距离（0 ~ 文档高度减去滚动条长度）
    // document.documentElement.scrollLeft //滚动条的left  (一般是0)   ！这两个只有Top和Left没有bottom和Right；
    // document.documentElement.clientWidth // 可见区域宽度（浏览器窗口的宽）
    // document.documentElement.clientHeight // 可见区域高度（浏览器窗口的高）
    // document.body.clientHeight //body的 高度（文档的高度）
    // document.body.clientWidth //body的宽度（文档的宽度）
    // document.body.scrollHeight //body的高度（跟人理解为与文档高度相同）
    // document.body.scrollWidth //body的宽度（跟人理解为与文档宽度相同）
    //window.pageYOffset滚动条的位置
    //*************************************************************************************************************
    //1.获取元素
    let divHeight = document.querySelector('.content');
    let goTop = document.querySelector('.goTop');
    //console.log(goTop);
    //2.获取屏幕滚动条的高度

    function getHeight() {
        let flag = document.documentElement.scrollTop || document.body.scrollTop;
        if (flag >= 1000) {
            goTop.style.display = "block";
        } else {
            goTop.style.display = "none";
        }

    }

    //原生js通过window.onscroll监听页面滚动的方法
    window.onscroll = getHeight;
    //给返回绑定事件
    goTop.addEventListener('click', function () {
        //由于scrollTop是可写的，可以利用scrollTop来实现回到顶部的功能
        //document.body.scrollTop = document.documentElement.scrollTop = 0
        //scrollTo(x,y)方法滚动当前window中显示的文档，让文档中由坐标x和y指定的点位于显示区域的左上角
        //scrollTo(0, 0);
        //Element.scrollIntoView方法滚动当前元素，进入浏览器的可见区域　
        divHeight.scrollIntoView();
        getHeight();
    })

</script>

</html>
码农公寓

相关文章
