lovecoding
/
VIP32


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
							<!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>
    <!-- JS
        ECMAScript => es6
        BOM 浏览器对象模型
        DOM 文档对象模型
    -->
    <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>
    <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>
      // document 根节点
      // scrollTo(x,y) 距离窗口进行跳转
      // scrollBy(x,y) 距离自身的位置跳转
      // 先获取按钮
      // 1.获取id名称的元素
      var btn1 = document.getElementById("btn1");
      var btn2 = document.getElementById("btn2");
      console.log(btn1);
      //2.添加点击事件
      btn1.onclick = function () {
        // 定时器：setInterVal(函数,时间) 间隔一段时间执行函数
        // 清除定时器方法 clearInterval()
        var timer = setInterval(function () {
          var scrollTop =
            document.body.scrollTop || document.documentElement.scrollTop;
          console.log(scrollTop);
          if (scrollTop <= 1800) {
            scrollBy(0, 200);
          } else {
            clearInterval(timer);
            alert("到底了!");
          }
        }, 1000);
      };
      btn2.onclick = function() {
        var timer = setInterval(function(){
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            if(scrollTop > 0) {
                scrollBy(0,-200);
            } else{
                clearInterval(timer);
                alert("到顶了！")
            }
        },1000)
      }
    </script>
  </body>
</html>