$('#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. vsftpd启动问题简记

    centos7 能以ipv6方式启动,启动只需修改配置如下 如需同时启动到ipv4跟ipv6,需拷贝配置文件,一份配置中只监听ipv4,一份配置中只监听ipv6 centos6中无法启动到ipv6,错 ...

  2. [物理学与PDEs]第1章第2节 预备知识 2.2 Ampere-Biot-Savart 定律, 静磁场的散度与旋度

    1. 电流密度, 电荷守恒定律 (1) 电荷的定向移动形成电流. (2) 电流密度 ${\bf j}$, 是描述导体内一点在某一时刻电流流动情况的物理量, 用单位时间内通过垂直于电流方向的单位面积的电 ...

  3. frame的用法

    <iframe> 标签规定一个内联框架.一个内联框架被用来在当前 HTML 文档中嵌入另一个文档. 所有的主流浏览器都支持<iframe>标签.你可以把提示的文字放到 < ...

  4. 网络流Dinic(本篇介绍最大流)

    前言:看到网上Dinic和ISAP的比较,多数人认为ISAP更快,不容易爆栈.当然,也有少数人认为,在多数情况下,Dinic比较稳定.我认为Dinic的思路比ISAP更简明,所以选择了Dinc算法 介 ...

  5. 【Java编程思想笔记】注解1-简单了解注解

    文章参考:https://www.cnblogs.com/xuningchuanblogs/p/7763225.html https://www.cnblogs.com/xdp-gacl/p/3622 ...

  6. 设计模式七: 策略(Strategy)

    简介 策略属于行为型模式的一种,策略模式允许对象的行为或算法在运行时改变,使用不同的算法达成相同的结果或目的. 实现层面上,定义一个抽象的算法接口, 然后根据具体算法的不同定义不同的类去实现该接口, ...

  7. dubbo启动时检查服务

    Dubbo 缺省会在启动时检查依赖的服务是否可用,不可用时会抛出异常,阻止 Spring 初始化完成,以便上线时,能及早发现问题,默认 check="true". 可以通过 che ...

  8. LNMP下安装Pureftpd开启FTP服务以及修改FTP端口的方法

    LNMP 环境包 1.2 内置了 Pureftpd 的安装程序. 安装 Pureftpd 进入lnmp解压后的目录,执行:./pureftpd.sh 会显示如下图: 按提示输入当前MySQL的root ...

  9. Scrapy-redis 分布式

    分布式:架构方式 多台真实机器+爬虫(如requests,scrapy等)+任务共享中心 多台虚拟机器(或者部分虚拟部分真实)+爬虫(如requests,scrapy等)+任务共享中心 多台容器级虚拟 ...

  10. webpack4 搭建遇到的奇葩问题集合

    一.webpack4 打包es6 会报错 需要安装一下插件 https://blog.csdn.net/Beamon__/article/details/85048448二.webpack4 打包动态 ...