jquery平滑滚动到顶部插件使用详解


Posted in jQuery onMay 08, 2017

点击一个固定按钮,平滑的滚动到窗口顶部的这种功能,在前端开发是相当常见的,如图:

jquery平滑滚动到顶部插件使用详解

关键代码:

$.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; 
}; 
 
//调用 
 $("body").scrollTo({ toT: 0 });

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery操作css样式
May 15 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
JQuery 又谈ajax局部刷新
Nov 27 jQuery
jquery 输入框查找关键字并提亮颜色的实例代码
Jan 23 jQuery
jQuery实现表单动态添加与删除数据操作示例
Jul 03 jQuery
jquery分页插件pagination使用教程
Oct 23 jQuery
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 jQuery
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 #jQuery
jquery replace方法去空格
May 08 #jQuery
jQuery实现在HTML文档加载完毕后自动执行某个事件的方法
May 08 #jQuery
JQuery实现图片轮播效果
May 08 #jQuery
jQuery中的deferred对象和extend方法详解
May 08 #jQuery
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 #jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 #jQuery
You might like
php自动获取目录下的模板的代码
2010/08/08 PHP
Windows下部署Apache+PHP+MySQL运行环境实战
2012/08/31 PHP
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
PHP安全下载文件的方法
2016/04/07 PHP
CakePHP框架Model函数定义方法示例
2017/08/04 PHP
javascript 强制刷新页面的实现代码
2009/12/13 Javascript
js 多浏览器分别判断代码
2010/04/01 Javascript
jquery获取特定name所有选中的checkbox,支持IE9标准模式
2013/03/18 Javascript
js导出格式化的excel 实例方法
2013/07/17 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
轻松实现jquery选项卡切换效果
2016/10/10 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
vue 属性拦截实现双向绑定的实例代码
2018/10/24 Javascript
基于element-ui组件手动实现单选和上传功能
2018/12/06 Javascript
微信小程序实现日期格式化和倒计时
2020/11/01 Javascript
Vue学习之axios的使用方法实例分析
2020/01/06 Javascript
用Python将mysql数据导出成json的方法
2018/08/21 Python
windows7 32、64位下python爬虫框架scrapy环境的搭建方法
2018/11/29 Python
使用python的pexpect模块,实现远程免密登录的示例
2019/02/14 Python
Python assert语句的简单使用示例
2019/07/28 Python
python lambda函数及三个常用的高阶函数
2020/02/05 Python
基于django2.2连oracle11g解决版本冲突的问题
2020/07/02 Python
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
护士自我鉴定范文
2013/10/06 职场文书
函授本科毕业生自我鉴定
2013/10/16 职场文书
家长会学生家长演讲稿
2013/12/29 职场文书
母亲节感恩寄语
2014/02/21 职场文书
小学语文业务学习材料
2014/06/02 职场文书
优秀学生干部个人事迹材料
2014/06/02 职场文书
应届生面试求职信
2014/07/02 职场文书
2014年服务员工作总结
2014/11/18 职场文书
雨中的树观后感
2015/06/03 职场文书
感恩的心主题班会
2015/08/12 职场文书
python小程序之飘落的银杏
2021/04/17 Python