lovecoding
/
web0331


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn1">往下走</button>
    <h2>哈哈哈哈哈哈</h2>
    <h2>哈哈哈哈哈哈</h2>
    <h2>哈哈哈哈哈哈</h2>
    <h2>哈哈哈哈哈哈</h2>
    <h2>哈哈哈哈哈哈</h2>
    <h2>哈哈哈哈哈哈</h2>
    <h2>哈哈哈哈哈哈</h2>
    <h2>哈哈哈哈哈哈</h2>
    <h2>哈哈哈哈哈哈</h2>
    <h2>哈哈哈哈哈哈</h2>
    <h2>哈哈哈哈哈哈</h2>
    <h2>哈哈哈哈哈哈</h2>
    <h2>哈哈哈哈哈哈</h2>
    <h2>哈哈哈哈哈哈</h2>
    <h2>哈哈哈哈哈哈</h2>
    <h2>哈哈哈哈哈哈</h2>
    <h2>哈哈哈哈哈哈</h2>
    <h2>哈哈哈哈哈哈</h2>
    <h2>哈哈哈哈哈哈</h2>
    <h2>哈哈哈哈哈哈</h2>
    <h2>哈哈哈哈哈哈</h2>
    <h2>哈哈哈哈哈哈</h2>
    <h2>哈哈哈哈哈哈</h2>
    <h2>哈哈哈哈哈哈</h2>
    <h2>哈哈哈哈哈哈</h2>
    <button id="btn2">往上走</button>
    <script>
        /**
         * JS:
         * BOM：Browser Object Model (浏览器 对象 模型)
         * DOM:Document Object Model (文档 对象 模型)
         * ECMAScript：es(2015,2020,2021 =>５，６，７，８)
        */
        //获取元素标签
        var btn1 = document.getElementById("btn1");
        var btn2 = document.getElementById("btn2");
        console.log(btn1,btn2,'按钮')
        // 给元素添加点击事件
        btn1.onclick = function() {
            // scrollTo(x,y)距离窗口跳转
            // scrollBy(x,y)距离自身跳转
            // 每一秒钟执行一件事
            // 定时器
           var timer = setInterval(function(){
                var scrollMain = document.documentElement.scrollTop || document.body.scrollTop;
                console.log(scrollMain,'12')
                console.log("执行")
                if(scrollMain <= 706) {
                    scrollBy(0,200)
                } else {
                    clearInterval(timer)
                }
            },1000)
        }
    </script>
</body>
</html>