页面定位平滑滚动

༒消逝的光芒

于 2022-10-09 20:40:15 发布

阅读量106

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_43350503/article/details/127233580

版权

<!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>
.container {
    width: 1900px;
    margin: 0 auto;
    position: relative;
}

.elevator {
    position: fixed;
    right: 0;
    top: 400px;
    display: block;
}
div{
    width: 800px;
    height: 1600px;
    background-color: pink;
}

    </style>
</head>
<body>
    <div>

    </div>
    <div class="container">
        <h1>Title</h1>
        <p>Lorem</p>
        <div class="elevator">
            <ul>
                <li id="cc"><a href="javascript:;">返回顶层</a></li>
                <li id="zz"><a href="javascript:;">返回顶层1</a></li>
                <li id="kk"><a href="javascript:;">返回顶层2</a></li>
            </ul>
        </div>
    </div>
</body>

<script>
var elevator = document.getElementsByClassName("elevator")[0]
var goBack = document.querySelector(".elevator>ul>li>a")
var cc = document.querySelector(".elevator>ul>#cc>a")
var zz = document.querySelector(".elevator>ul>#zz>a")
var kk = document.querySelector(".elevator>ul>#kk>a")
console.dir(elevator)
window.onscroll = function(e) {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop

cc.onclick = () => {
    window.scrollTo({
        top: 500,
        left: 0,
        behavior: 'smooth' //重点在此
    })
}
zz.onclick = () => {
    window.scrollTo({
        top: 400,
        left: 0,
        behavior: 'smooth' //重点在此
    })
}
kk.onclick = () => {
    window.scrollTo({
        top: 300,
        left: 0,
        behavior: 'smooth' //重点在此
    })
}
}  
</script>  


</body>
</html>