$('#backToTop').click(function(){
var dist = $(document).height() - $(window).height();
timer = requestAnimationFrame(function fn(){
if($(window).scrollTop() > 0){
//console.log($(window).scrollTop() + ':dist:'+dist);
$(window).scrollTop($(window).scrollTop()-20);
timer = requestAnimationFrame(fn);
}else{
cancelAnimationFrame(timer);
}
});
});

requestAnimationFrame移动端实现回到顶部效果的更多相关文章

  1. JS实现回到顶部效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 用Javascript实现回到顶部效果

    用Javascript实现回到顶部效果 经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法.众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的.(锚链接回到顶 ...

  3. javascript 特效实现(2)——回到顶部效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. jquery实现"跳到底部","回到顶部"效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 页面滚动事件和利用JS实现回到顶部效果

    页面滚动 事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...

  6. jQuery写toTop(回到顶部)效果

    在通常的网站开发中,页面有时候会很长,尤其是一些电商网站,为了提高用户的体验效果,我们通常会增加一个回到顶部的按钮,这个按钮我们同城会使用fixed定位,将其定位在当前可视区域某一固定位置.这个效果用 ...

  7. javascript 回到顶部效果的实现

    demo.js window.onload=function() { var timer=null; var obtn=document.getElementById('btn'); var isTo ...

  8. JS原生回到顶部效果

    // 回到顶部 onload = function () { var oBtnTop = document.getElementById('toTop'); var timer = null; oBt ...

  9. 自写jquery网页回到顶部效果,渐隐图标,引用js文件就可以

    唔.进来开发需求,当网页内容草鸡多的时候,用户就须要有个button高速回到顶部,而不是自己去滚滑轮~ 原本以为比較难的说,由于上头要求所实用js来实现,哪个页面引用,哪个页面显示. 于是乎,本屌丝就 ...

随机推荐

  1. ssm心得

    dao层 mybatis mapper工厂spring接管后,直接拿到mapper接口就可以来实现方法 service层 注入dao层的mapper实现各种方法.. controller 层 注入se ...

  2. keepalive半同步双主一从

    ip地址如下: 192.168.20.201 redis01 主 192.168.20.202 redis02 主 192.168.20.203 redis03 从 192.168.20.205 vi ...

  3. AngularJS初识

     AngularJS 简介 AngularJS是一个javaScript框架,是一个用JavaScript编写的库,通过指令扩展了HTML,且通过表达式绑定数据到HTML中. AngularJS使开发 ...

  4. Visual Studio 2015中 没有“安装和部署”的解决方法

    使用Visual Studio 2015 Community新建项目,在已安装模板中的“其它项目类型”下未找到“安装和部署”选项.在微软官网下载 Microsoft Visual Studio 201 ...

  5. 使用DBMS_SHARED_POOL包将对象固定到共享池

    使用DBMS_SHARED_POOL包将对象固定到共享池2011年06月24日 09:45:00 Leshami 阅读数:5808 版权声明:本文为博主原创文章,欢迎扩散,扩散请务必注明出处. htt ...

  6. ESP8266代码中的存储标记

    const uint8 MyArr[1024] ICACHE_RODATA_ATTR = {0}; void MyFun() ICACHE_FLASH_ATTR { } 这种 ICACHE 开头的宏作 ...

  7. 有道云笔记Markdown上传本地图片的方法

    有道云笔记截图&保存   方法有多种,例如:开通有道云笔记VIP会员.先将图片文件上传到有道云笔记后使用图片的分享链接.说到底还是使用的 Markdown 的图片功能 ![图片名称](图片链接 ...

  8. uni-app hbuilderX ios离线打包,启动图修改没反应

    最后还是没反应 删除app从新安装, 可参考https://www.jianshu.com/p/47c1377c61d6

  9. 微信H5支付坑一--手续费未结算

    简单随笔小记: 场景:在微信H5支付的过程中,无论怎么支付完成,在微信商户后台查询手续费依然未扣除,当时手续费账户月为5元. 解决方法:起初无论怎么测试都不知道代码到底问题出在哪里了,想一下手续费账户 ...

  10. hadoop家族技能图谱