lovecoding
/
class


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182
							<!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>
    <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>
      /**
       * 滚动
       * scrollTo(x,y) 距离窗口进行跳转
       * scrollBy(x,y) 距离自身位置进行跳转
       * 获取跳转的高度
       * document.body.scrollTop  document.documentElement.scrollTop
       */
      var btn1 = document.getElementById("btn1");
      var btn2 = document.getElementById("btn2");
      btn1.onclick = function () {
        var timer = setInterval(function () {
          var scrollTop =
            document.body.scrollTop || document.documentElement.scrollTop;
          console.log(scrollTop);
          if (scrollTop < 1451) {
            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>