JavaScript - 点击按钮滚动至页面顶部

最新推荐文章于 2024-10-31 16:02:32 发布

Heismk

最新推荐文章于 2024-10-31 16:02:32 发布

阅读量532

点赞数

本文链接：https://blog.csdn.net/qq_29761395/article/details/117624213

版权

HTML & CSS & JavaScript 专栏收录该内容

65 篇文章 1 订阅

订阅专栏

文章目录

效果
代码
参考

效果

在这里插入图片描述

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Scroll To Top</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body {
                height: 200vh;
            }
            div.to-top {
                position: fixed;
                right: 50px;
                bottom: 50px;
                width: 50px;
                height: 50px;
                border: 1px solid #000000;
            }
            div.to-top.hidden {
                display: none;
            }
            p {
                padding: 10px;
            }
        </style>
    </head>
    <body>
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
        <p>6</p>
        <p>7</p>
        <p>8</p>
        
        <div class="to-top"></div>
        
        <script type="text/javascript">
            window.onload = (event) => {
                // console.log(event)
                main()
            }
            
            function main() {
                const divToTop = document.querySelector("div.to-top")
                divToTop.classList.toggle("hidden", window.scrollY === 0)
                
                window.onscroll = (event) => {
                    console.log(window.scrollY)
                    divToTop.classList.toggle("hidden", window.scrollY === 0)
                }
                
                divToTop.onclick = (event) => {
                    window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })
                }
            }
        </script>
    </body>
</html>