requestAnimationFrame移动端实现回到顶部效果
$('#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移动端实现回到顶部效果的更多相关文章
- JS实现回到顶部效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 用Javascript实现回到顶部效果
用Javascript实现回到顶部效果 经常看到网页中有回到顶部的效果,今天也研究一下回到顶部有哪些方法.众所周知,用锚链接是实现回到最简单的方法,但是从用户体验效果来说,并不是最好的.(锚链接回到顶 ...
- javascript 特效实现(2)——回到顶部效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jquery实现"跳到底部","回到顶部"效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 页面滚动事件和利用JS实现回到顶部效果
页面滚动 事件:window.onscroll, 获得页面滚动位置:document.body.scrollTop: HTML代码: 这里注意此处逻辑,大于500就显示,否则就隐藏,还有注意如果变量名 ...
- jQuery写toTop(回到顶部)效果
在通常的网站开发中,页面有时候会很长,尤其是一些电商网站,为了提高用户的体验效果,我们通常会增加一个回到顶部的按钮,这个按钮我们同城会使用fixed定位,将其定位在当前可视区域某一固定位置.这个效果用 ...
- javascript 回到顶部效果的实现
demo.js window.onload=function() { var timer=null; var obtn=document.getElementById('btn'); var isTo ...
- JS原生回到顶部效果
// 回到顶部 onload = function () { var oBtnTop = document.getElementById('toTop'); var timer = null; oBt ...
- 自写jquery网页回到顶部效果,渐隐图标,引用js文件就可以
唔.进来开发需求,当网页内容草鸡多的时候,用户就须要有个button高速回到顶部,而不是自己去滚滑轮~ 原本以为比較难的说,由于上头要求所实用js来实现,哪个页面引用,哪个页面显示. 于是乎,本屌丝就 ...
随机推荐
- 携程apollo系列-个人开发环境搭建
本博客讲详细讲解如何在 Windows 搭建携程 Apollo 服务器 (用户个人开发). 开发服务器有多种搭建方式:(1) docker, 搭建过程非常简单, 推荐有 docker 环境(2) 部署 ...
- $\be$-QGE 的弱强唯一性
在 [Zhao, Jihong; Liu, Qiao. Weak-strong uniqueness criterion for the $\beta$-generalized surface qua ...
- python的os.system函数的应用
os的system原理 system函数可以将字符串转化成命令在服务器上运行:其原理是每一条system函数执行时,其会创建一个子进程在系统上执行命令行,子进程的执行结果无法影响主进程 上述原理会导致 ...
- MySQL学习7 - 外键的变种 三种关系
一 介绍 二 如何找两张表之间的关系 三 表的三种关系 1.书和出版社 2.作者和书籍的关系 3.用户和博客 本节的重点 如何找出两张表之间的关系 表的三种关系 一 介绍 因为有foreign key ...
- centos7.2 环境下两个数据库的安装部署
首先假如服务器上已经有一个 数据库mysql5.6.29,端口是3306. 接下来在安装一个mysql数据库,端口是3307的. 一:创建mysql编译目录 mkdir /usr/local/mysq ...
- vue中使用swiper-slide时,循环轮播失效?
前言 vue 项目中使用时,组件swiper-slide 如果用v-for循环的话,loop:true 就不能无缝轮播,每次轮播到最后一张就停止了??? 正文 代码如下: <swiper :op ...
- go语言学习 一
1.变量声明 指定变量类型,声明后若不赋值,使用默认值 根据值自行判定变量类型. 省略var, 注意 :=左侧的变量不应该是已经声明过的,否则会导致编译错误 2.go语言作用域 函数内定义的变量称为局 ...
- Android 控件背景选择图片还是drawable XML资源
决定一个控件应该是否用Drawable XML渲染,应考虑以下几个因素: * App是否要支持多分辨率: * App是否有瘦身的需要: * 图案是否足够简单: * 图案需要自由缩放: * 设计开发工作 ...
- 关于含RecyclerView的fragment来回切换时页面自动滑动到底部的解决方法
原因: 在fragment中来回切换时RecyclerView获得了焦点,而RecyclerView的 focusableOnTouchMode属性默认是true,所以在切换时RecyclerView ...
- Linux shell 脚本总结
在中括号中,判断变量的值, 加不加双引号的问题? -z 判断 变量的值,是否为空: zero = 0 - 变量的值,为空,返回0,为true - 变量的值,非空,返回1,为false -n 判断变量的 ...