点击返回顶部

function goTop(acceleration, time) {acceleration = acceleration || 0.1;time = time || 16;var x1 = 0;var y1 = 0;var x2 = 0;var y2 = 0;var x3 = 0;var y3 = 0;if (document.documentElement) {x1 = document.documentElement.scrollLeft || 0;y1 = document.documentElement.scrollTop || 0;}if (document.body) {x2 = document.body.scrollLeft || 0;y2 = document.body.scrollTop || 0;}var x3 = window.scrollX || 0;var y3 = window.scrollY || 0;// 滚动条到页面顶部的水平距离var x = Math.max(x1, Math.max(x2, x3));// 滚动条到页面顶部的垂直距离var y = Math.max(y1, Math.max(y2, y3));// 滚动距离 = 目前距离 / 速度, 因为距离原来越小, 速度是大于 1 的数, 所以滚动距离会越来越小var speed = 1 + acceleration;window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));// 如果距离不为零, 继续调用迭代本函数if (x > 0 || y > 0) {var invokeFunction = "goTop(" + acceleration + ", " + time + ")";window.setTimeout(invokeFunction, time);}}$("#back2top").on("click", function() {//$("body").scrollTop(0);//window.scrollTo(0,0);
    goTop();});

zepto滚动到某个位置

$.fn.scrollTo = function(options) {var defaults = {toT: 0, //滚动目标位置durTime: 500, //过渡动画时间delay: 30, //定时器时间callback: null //回调函数
  };var opts = $.extend(defaults, options),timer = null,_this = this,curTop = _this.scrollTop(), //滚动条当前的位置subTop = opts.toT - curTop, //滚动条目标位置和当前位置的差值index = 0,dur = Math.round(opts.durTime / opts.delay),smoothScroll = function(t) {index++;var per = Math.round(subTop / dur);if (index >= dur) {_this.scrollTop(t);window.clearInterval(timer);if (opts.callback && typeof opts.callback == 'function') {opts.callback();}return;} else {_this.scrollTop(curTop + index * per);}};timer = window.setInterval(function() {smoothScroll(opts.toT);}, opts.delay);return _this;
};

zepto返回顶部动画相关推荐

  1. JQuery 动画卷页 -- 返回顶部 动画特效(兼容Chrome)

    首先给这些'返回页首'的链接加上个Class: <a href="#" class="backtotop" target="_self" ...

  2. 原生js实现移动端京东首页搜索框、菜单栏滑动弹回、倒计时、banner动画、缓慢返回顶部效果(HTML+CSS+JS)

    一.实现效果 二.实现功能 搜索框滑动固定,伸缩动画 菜单栏左右滑动,超出区域自动弹回 banner自动轮播,手指左右滑动,滑动距离一半以内自动弹回,超过一半自动跳到下一张,圆点跟随显示颜色,以及实现 ...

  3. jquery实现:返回顶部(动画·代码精简版)- 代码篇

    jquery实现:返回顶部(动画·代码精简版):animate 使用css3的animate属性,一行代码就能实现功能. 动画演示(省略) 代码如下:(精简) <script type=&quo ...

  4. jQuery带有动画的返回顶部

    案例分析 案例实现代码 核心区域 $(function() {// 返回指定的位置$(document).scrollTop(100);// 被卷去的头部scrollTop 被卷去的左侧 scroll ...

  5. Javascript-API-BOM、动画函数、网页轮播图、节流阀、筋斗云、固定侧边栏返回顶部案例

    动画实现原理 核心原理:通过定时器 setInterval() 不断移动盒子位置. 实现步骤: 获得盒子当前位置 让盒子在当前位置加上1个移动距离 利用定时器不断重复这个操作 加一个结束定时器的条件 ...

  6. 【前端学习-16】【day06】WebAPI编程/动画函数封装/回调函数/轮播图/自动播放/节流阀/返回顶部/筋斗云/触屏事件/触屏事件对象/

    新增动画前进后退效果 案例:轮播图 1.显示隐藏功能 2.动态生成小圆圈 3.排他思想 4.开始滚动 5.右侧按钮 6.克隆第一张图片 7.小圆圈跟着右侧按钮变化 8.序号和点击的要统一 9.左侧代码 ...

  7. b站pink老师JavaScript的PC端网页特效 案例代码——仿淘宝返回顶部(带有动画的返回顶部)

    目标效果: 在之前写好的 的代码基础上 实现点击返回顶部字样,即可用缓动动画返回顶部[见代码段中4.和动画函数部分] 重点语法: 滚动窗口至文档中的特定位置 window.scroll(x,y) x, ...

  8. jquery实现返回顶部按钮和scroll滚动功能[带动画效果] 转载

    转载自:老驴的博客 jQuery脚本: 1 <script type="text/javascript">2$(function() {3 var scrollDiv ...

  9. 返回顶部的js实现(jQuery/MooTools)

    一.引言 在web页面中,如果页面较高,为了方便用户快速地返回顶部,都会添加一个返回顶部按钮.例如: 如果你看到这段文字,说明转自<一棵树-博客园>,原文链接:http://www.cnb ...

最新文章

  1. linux时间和时区修改(附suse)
  2. wxpython视频教程-单片机C语言入门_单片机教程_单片机编程语言 - C语言网
  3. 绝不能错过的10款最新OpenStack网络运维 监控工具
  4. C# IE浏览器操作类
  5. 【Linux】一步一步学Linux——arpd命令(184)
  6. java技术分享主题_Java开发入门:适合新手练手的Java项目(附源码下载)
  7. 滤波器的优点_声光可调谐滤波器
  8. project日历设置-大小周交替
  9. 画图必备numpy函数
  10. [转载] 夯实Java基础系列8:深入理解Java内部类及其实现原理
  11. go和python选哪个_我为什么放弃了 Python 选择了 Go?
  12. subsonic杂记
  13. R语言检验时间序列中是否存在自相关性:使用box.test函数执行box-pierce检验验证时间序列中是否存在自相关性
  14. 【错误记录】Android 编译报错 ( Installed Build Tools revision 31.0.0 is corrupted. Remove and install again )
  15. 一个流氓眼中的物联网
  16. 逆滲透水與蒸餾水最不能喝
  17. 论文阅读笔记:DOER: Dual Cross-Shared RNN for Aspect Term-Polarity Co-Extraction
  18. Idea Lambda expressions are not supported at language level '5' 解决
  19. 睡觉也在爬虫之二(爬一组图片)
  20. ​Python 中的数字到底是什么?

热门文章

  1. 计算机专业跨考学科英语难吗,跨考学科英语,过来人走过的弯路
  2. 若依集成ueditor富文本编辑器
  3. 若依如何配置允许跨域访问?
  4. c#执行多句oracle,C#一次执行多条SQL语句,Oracle11g数据库
  5. in use 大学英语4word_(word)大学英语考试样题四.doc
  6. Windows下Github使用
  7. 通过函数名字符串调用函数【C语言版】
  8. js去除png格式的图片阴影
  9. php 超大整数计算,PHP int 超大溢出整数的 加减运算函数,如果有更好的方法欢迎探讨...
  10. php js特效代码如何用,phpstorm编写代码增加代码爆炸效果