前端开发js滚动条回到顶部

前端开发小游戏制作
游戏前端和web前端开发
游戏 前端开发

html 代码

<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
        <title>回到顶部</title>
        <meta name=”description” content=”” />
        <meta name=”keywords” content=”” />
        <link href=”” rel=”stylesheet” />
        <style type=”text/css”>
            body {
                padding: 0;
                margin: 0;
            }
            .box {
                position: relative;
                height: 5000px;
                width: 100%;
            }
            .box1 {
                height: 1000px;
                width: 100%;
                background: red;
            }
            .box2 {
                height: 1000px;
                width: 100%;
                background: green;
            }
            .box3 {
                height: 1000px;
                width: 100%;
                background: gray;
            }
            .box4 {
                height: 1000px;
                width: 100%;
                background: yellow;
            }
            .box5 {
                height: 1000px;
                width: 100%;
                background: blue;
            }
            .scroll {
                height: 30px;
                width: 30px;
                background: #4cc9c8;
                position: fixed;
                right: 10px;
                bottom: 10px;
                display: none;
            }
        </style>
    </head>
    <body>
        <div class=”box”>
            <div class=”box1″></div>
            <div class=”box2″></div>
            <div class=”box3″></div>
            <div class=”box4″></div>
            <div class=”box5″></div>
            <div class=”scroll” id=”scroll”></div>
        </div>
        <script type=”text/javascript”>
            window.onscroll = function() {
                var oScroll = document.getElementById(‘scroll’)
                var winH = document.body.clientHeight
                var scrollT =
                    parseInt(document.body.scrollTop) ||
                    parseInt(document.documentElement.scrollTop) ||
                    parseInt(window.pageYOffset)
                var time = null
                var spped = 0
                if (scrollT > 1000) {
                    oScroll.style.display = ‘block’
                } else {
                    oScroll.style.display = ‘none’
                }
                oScroll.onclick = function() {
                    time = setInterval(function() {
                        speed = Math.ceil(scrollT / 50)
                        console.log(scrollT)
                        if (scrollT > 0) {
                            scrollT -= speed
                            document.body.scrollTop = scrollT
                            document.documentElement.scrollTop = scrollT
                            window.pageYOffset = scrollT
                        } else {
                            clearInterval(time)
                        }
                    }, 10)
                }
            }
        </script>
    </body>
</html>
前端游戏开发的背景
游戏开发前端薪资
开发狼人杀游戏前端
前端开发 游戏
» 本文来自:前端开发者 » 《前端开发js滚动条回到顶部》
» 本文链接地址:https://www.rokub.com/7314.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!