点击按钮，页面滚动条向下滚动，分长按和短按两种状态（简单的效果）

最新推荐文章于 2024-02-04 09:00:00 发布

lceBear

最新推荐文章于 2024-02-04 09:00:00 发布

阅读量826

点赞数

原文链接：http://www.cnblogs.com/bwx-lina/p/7777175.html

版权

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="format-detection" content="telephone=no" />
    <title>页面滚动</title>
  </head>
  <body>
  <div id="div" style="height: 2000px"></div>
  <button id="btn">向下</button>
  <style>
    button{position: fixed; right: 10px; bottom: 10px;}
  </style>
  <script>

  var btn = document.getElementById("btn");
  var dv = document.getElementById("div");
  var dvT = dv.scrollTop;
  var step = 500;
  var timer;
  var clickTime = false;
  var isclick=true;
  var color = function () {
      return 'rgb(' + [
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160),
              Math.round(Math.random() * 160)
          ].join(',') + ')';
  };
  /*********短按************/
function click_fn() {
    dvT += step;
    window.scrollTo(0,dvT);
    dv.style.backgroundColor = color();
}

 /*********长按************/

function long() {
    isclick=false;
    dv.style.backgroundColor = color();
    timer = setInterval(function(){
        dvT += 5;
        window.scrollTo(0,dvT);
    },30)
}
  btn.onmousedown = function(){
      isclick=true;
      clearTimeout(clickTime);
      clickTime=setTimeout(long,1000);
  };
  btn.onmouseup = function(){
      clearTimeout(clickTime);
      clearInterval(timer);
      if(isclick){
          click_fn();
      }
  }
  </script>
  </body>
</html>

转载于:https://www.cnblogs.com/bwx-lina/p/7777175.html

lceBear

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
点击按钮，页面滚动条向下滚动，分长按和短按两种状态（简单的效果）

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"> <meta name="format-detection" content="te...
复制链接

扫一扫