lovecoding
/
vipAllDay


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
							<!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>
    <!-- <input type="button" > -->
    <!-- 按钮标签 -->
    <button id="down">往下走</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>
    <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="up">往上走</button>
    <script>
        /**
         * js分为三个阶段
         * 1.BOM:Bowers Object Model 浏览器对象模型
         * 2.DOM：Document Object Model 文档对象模型
         * 3.ES：es6 es8 ...
        */
        // 1.获取id命名的标签 document.getElementById("id名称")
        var btn1 = document.getElementById("down"); 
        var btn2 = document.getElementById("up"); 
        // 2.点击事件
        // xxx.onclick = function() {}
        btn1.onclick = function() {
            //3.获取屏幕可滚动距离
            // console.log(document.documentElement.scrollTop)
            // console.log(document.body.scrollTop) 
            // 4.定时器：在一定的时间内执行一次 循环执行
            //  setInterval(function(){ console.log("每两秒指向")},2000)
            // 清除定时器：clearInterval();
            // 5.延时器：延迟一定的时间后执行  执行一次
            // setTimeout(function(){console.log("111")},2000)
            // 清除延时器：clearTimeout()
            // scrollTo(0,200); 相对于窗口滚动
            // scrollBy(0,300)； 相对于自身滚动
           var timer = setInterval(function(){
                var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
                // scrollBy(0,200)
                // console.log(scrollTop);
                if(scrollTop <= 2400) {
                    scrollBy(0,200)
                } else {
                    alert("到底了");
                    clearInterval(timer);
                }
            },100)
        }
        btn2.onclick = function() {
            var timer = setInterval(function(){
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                if(scrollTop > 0) {
                    scrollBy(0,-200)
                } else {
                    alert("到顶了");
                    clearInterval(timer);
                }
            },300)
        }
    </script>
</body>
</html>