lovecoding
/
W0407


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
							<!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>
    <h3>哈哈哈哈</h3>
    <h3>哈哈哈哈</h3>
    <h3>哈哈哈哈</h3>
    <h3>哈哈哈哈</h3>
    <h3>哈哈哈哈</h3>
    <h3>哈哈哈哈</h3>
    <h3>哈哈哈哈</h3>
    <h3>哈哈哈哈</h3>
    <h3>哈哈哈哈</h3>
    <h3>哈哈哈哈</h3>
    <h3>哈哈哈哈</h3>
    <h3>哈哈哈哈</h3>
    <h3>哈哈哈哈</h3>
    <h3>哈哈哈哈</h3>
    <h3>哈哈哈哈</h3>
    <h3>哈哈哈哈</h3>
    <h3>哈哈哈哈</h3>
    <h3>哈哈哈哈</h3>
    <h3>哈哈哈哈</h3>
    <h3>哈哈哈哈</h3>
    <h3>哈哈哈哈</h3>
    <h3>哈哈哈哈</h3>
    <h3>哈哈哈哈</h3>
    <h3>哈哈哈哈</h3>
    <h3>哈哈哈哈</h3>
    <h3>哈哈哈哈</h3>
    <h3>哈哈哈哈</h3>
    <h3>哈哈哈哈</h3>
    <h3>哈哈哈哈</h3>
    <h3>哈哈哈哈</h3>
    <h3>哈哈哈哈</h3>
    <h3>哈哈哈哈</h3>
    <button id="btn2">往上走</button>
    <script>
        // Bowers Object Model 
        // 获取id选择器标签
        // 延时器:延迟一定时间执行 只执行一次
        // var time2 =setTimeout(function(){
        //     console.log("1")
        // },5000)
        // clearTimeout(time2)
        // 定时器:规定时间内触发 连续触发
        //    var time1 = setInterval(function(){
        //         console.log("2")
        //     },1000)
        //     console.log(time1)
        // clearInterval(time1)

        var btn1 = document.getElementById("btn1");
        var btn2 = document.getElementById("btn2");
        console.log(btn1);
        btn1.onclick = function () {
           var timer =  setInterval(function() {
                var top = document.documentElement.scrollTop || document.body.scrollTop;
                if(top < 752) {
                     scrollBy(0,100)
                } else {
                    clearInterval(timer);
                }
            }, 500);
            // scrollTo(0,200) 距离窗口进行跳转
            // scrollBy(0,400) 距离自身进行跳转
        }
        btn2.onclick = function () {
           var timer =  setInterval(function() {
                var top = document.documentElement.scrollTop || document.body.scrollTop;
                if(top > 0) {
                     scrollBy(0,-100)
                } else {
                    clearInterval(timer);
                }
            }, 500);
            // scrollTo(0,200) 距离窗口进行跳转
            // scrollBy(0,400) 距离自身进行跳转
        }
    </script>
</body>

</html>