移动端返回顶部功能

最新推荐文章于 2022-10-13 12:45:09 发布

httpkaidi

最新推荐文章于 2022-10-13 12:45:09 发布

阅读量459

点赞数

分类专栏：移动端文章标签： javascript 前端

本文链接：https://blog.csdn.net/httpkaidi/article/details/121620400

版权

移动端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

移动端返回顶部

功能：
滚动到某个地方显示
事件 scroll 页面滚动事件
代码：

<style>
      * {
        height: 800px;
      }
      .nav {
        height: 200px;
        background-color: aquamarine;
      }
      .icon {
        display: none;
        float: right;
        width: 40px;
        height: 40px;
        padding-top: 250px;
      }
      img {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="nav">顶部</div>
    <div class="icon">
      <img src="images/home.png" alt="" />
    </div>
    <script>
      var icon = document.querySelector(".icon");
      var nav = document.querySelector(".nav");
      //添加页面滚动事件
      window.addEventListener("scroll", function () {
        if (window.pageYOffset >= nav.offsetTop) {
          icon.style.display = "block";
        } else icon.style.display = "none";
      });
      //图标添加点击事件
      icon.addEventListener("click", function () {
        window.scroll(0, 0);
      });
    </script>
  </body>

移动端click 延时解决方案
移动端click 事件会有300ms的延时问题，原因是移动端屏幕双击会缩放（ double tap to zoom）页面
解决方案：

方案一：
禁止缩放，浏览器禁用默认的双击缩放行为并且去掉 300 ms 的点击延时
<meta name="viewport" content="user-scalable=no" />
方案二：
利用touch 事件自己封装这个事件解决
原理：
当手指触摸屏幕，记录当前触摸事件
当手指离开屏幕，用离开的时间减去触摸的时间
如果时间小于150ms ，并且没有滑动屏幕，那么定义为点击
代码如下：

     //封装tap，解决click 300ms 延时
    function tap (obj, callback) {
        var isMove = false;
        var startTime = 0; // 记录触摸时候的时间变量
        obj.addEventListener('touchstart', function (e) {
            startTime = Date.now(); // 记录触摸时间
        });
        obj.addEventListener('touchmove', function (e) {
            isMove = true;  
            // 看看是否有滑动，有滑动算拖拽，不算点击
        });
        obj.addEventListener('touchend', function (e) {
            if (!isMove && (Date.now() - startTime) < 150) {  
            // 如果手指触摸和离开时间小于150ms 算点击
                callback && callback(); // 执行回调函数
            }
            isMove = false;  //  取反 重置
            startTime = 0;
        });
    }
     //调用  
    tap(div, function(){   // 执行代码  });

方案三：使用插件。fastclick 插件解决300ms 延迟。
JS插件是一个JS文件
下载地址：GitHub官网地址.

   <script src="fastclick.js"></script>  
    <!-- 引入fastclick插件 -->
  </head>
  <body>
    <script>
       //  fastclick 插件的使用
      if ('addEventListener' in document) {
	    document.addEventListener('DOMContentLoaded', function() {
		  FastClick.attach(document.body);
	    }, false);
      }
   </script>
  </body>

httpkaidi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端返回顶部功能

移动端返回顶部功能：滚动到某个地方显示事件 scroll 页面滚动事件代码：<style> * { height: 800px; } .nav { height: 200px; background-color: aquamarine; } .icon { display: none; float: right; width:
复制链接

扫一扫