文档章节

关于web移动端返回到顶部的解决方案

小寶
 小寶
发布于 2015/10/07 00:46
字数 261
阅读 4176
收藏 10

在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的动画,然后用到web移动端却没什么卵用,会出现滚动不流畅,卡顿,失灵等等现象。

这是因为移动端的scroll事件触发不频繁,有可能检测不到有<=0的情况

为此,移动端判断次数好些,

下面是具体实现代码,兼容pc:

//返回顶部动画
//goTop(500);//500ms内滚回顶部
function goTop(times){
 if(!!!times){
  $(window).scrollTop(0);
  return;
 }
 
 var sh=$('body').scrollTop();//移动总距离
 var inter=13.333;//ms,每次移动间隔时间
 var forCount=Math.ceil(times/inter);//移动次数
 var stepL=Math.ceil(sh/forCount);//移动步长
 var timeId=null;
 function ani(){
  !!timeId&&clearTimeout(timeId);
  timeId=null;
  //console.log($('body').scrollTop());
  if($('body').scrollTop()<=0||forCount<=0){//移动端判断次数好些,因为移动端的scroll事件触发不频繁,有可能检测不到有<=0的情况
   $('body').scrollTop(0);
   return;
  }
  forCount--;
  sh-=stepL;
  $('body').scrollTop(sh);
  timeId=setTimeout(function(){ani();},inter);
 }
 ani();
}

 

 

© 著作权归作者所有

上一篇: 網站如何使用svg
下一篇: html5离线应用
小寶
粉丝 5
博文 59
码字总数 41741
作品 0
广州
程序员
私信 提问
移动端布局与适配

grid实战之微信钱包 腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格,实际上是你将一个元素声明为一个网格容器,并把元素内容置于网...

掘金官方
2017/12/26
0
0
滑动穿透(锁body)终极探索

场景 当页面出现浮层的时候,滑动浮层的内容,正常情况下预期应该是浮层下边的内容不会滚动;然而事实并非如此。 如图所示,浮层下边的内容并没有如想象中不受影响。 解决 先去github上搜索一...

seventhMa
04/08
0
0
常见的移动端Web页面问题解决方案

安卓浏览器看背景图片,有些设备会模糊 用同等比例的图片在PC机上很清楚,但是手机上很模糊,原因是什么呢? 经过研究,是devicePixelRatio作怪,因为手机分辨率太小,如果按照分辨率来显示网...

冰泪_
2016/08/04
892
0
拿到一份设计稿,我该如何进行移动端开发?

出来混,那些混过去的,迟早是要还的 ( ̄Д  ̄)┍ 。 让我们来解决几个问题: 1. 什么是 viewport ? 它的的作用是啥? 提到 ,之前总感觉挺突兀的,但是当我最近做移动端项目时,突然关注到一...

一个笑点低的妹纸
09/07
0
0
求指点多终端解决方案

我做个软件,有安卓端,苹果端,pc端,web移动端,数据肯定必须是同步的,有什么好办法,让业务代码尽可能统一。 比如安卓与苹果的返回json或者xml就可以了,一套代码合适 移动端也可以用aja...

老成有木有
2017/05/14
89
3

没有更多内容

加载失败,请刷新页面

加载更多

nginx学习笔记

中间件位于客户机/ 服务器的操作系统之上,管理计算机资源和网络通讯。 是连接两个独立应用程序或独立系统的软件。 web请求通过中间件可以直接调用操作系统,也可以经过中间件把请求分发到多...

码农实战
今天
5
0
Spring Security 实战干货:玩转自定义登录

1. 前言 前面的关于 Spring Security 相关的文章只是一个预热。为了接下来更好的实战,如果你错过了请从 Spring Security 实战系列 开始。安全访问的第一步就是认证(Authentication),认证...

码农小胖哥
今天
10
0
JAVA 实现雪花算法生成唯一订单号工具类

import lombok.SneakyThrows;import lombok.extern.slf4j.Slf4j;import java.util.Calendar;/** * Default distributed primary key generator. * * <p> * Use snowflake......

huangkejie
昨天
12
0
PhotoShop 色调:RGB/CMYK 颜色模式

一·、 RGB : 三原色:红绿蓝 1.通道:通道中的红绿蓝通道分别对应的是红绿蓝三种原色(RGB)的显示范围 1.差值模式能模拟三种原色叠加之后的效果 2.添加-颜色曲线:调整图像RGB颜色----R色增强...

东方墨天
昨天
11
1
将博客搬至CSDN

将博客搬至CSDN

算法与编程之美
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部