变速返回顶部

最新推荐文章于 2024-08-12 09:24:46 发布

W`hite

最新推荐文章于 2024-08-12 09:24:46 发布

阅读量390

点赞数 8

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/AYBBZXY/article/details/134627546

版权

返回顶部

它是变速返回顶部的，但是上传视频还得过审好麻烦，就放张图吧😊
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #box{
            height: 2000px;
            background-color: darkkhaki;
        }
        #img{
            position: fixed;
            right: 50px;
            bottom:0px;
            display: none;
        }
    </style>
</head>
<body>
    <div id="box">
        <div id="img">
            <img src="./灰色音乐.jpeg" alt="" style="width: 60px;height: 60px;">
        </div>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>0</li>
        </ul>
    </div>
    <script>
        var img = document.getElementById('img');
		
		//图片的显示与消失，判断到顶部
        window.onscroll = function(){
            var top = document.documentElement.clientHeight;
            if (document.documentElement.scrollTop>top){
                img.style.display='block';
            } else {
                img.style.display='none';
            }
        }

        img.onclick = function(){
            var returnTop = setInterval(function(){
                var top = document.documentElement.scrollTop
                var v = Math.floor(-top/5)
                document.documentElement.scrollTop = top + v//变速
                if(top == 0){
                    clearInterval(returnTop)
                }
            },30)
        }

    </script>
</body>
</html>