|
|
@@ -0,0 +1,112 @@
|
|
|
+<!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>
|
e