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.masonry瀑布流效果
May 25 jQuery
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
jQuery实现网页拼图游戏
Apr 22 jQuery
jquery+css实现Tab栏切换的代码实例
May 14 jQuery
jquery实现自定义树形表格的方法【自定义树形结构table】
Jul 12 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
JQuery基于FormData异步提交数据文件
Sep 01 jQuery
jQuery实现二级导航菜单的示例
Sep 30 jQuery
jquery插件实现搜索历史
Apr 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
如何分别全角和半角以避免乱码
2006/10/09 PHP
APMServ使用说明
2006/10/23 PHP
php程序总是提示验证码输入有误解决方案
2015/01/07 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
[原创]PHP字符串中插入子字符串方法总结
2016/05/06 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
使用vs code编辑调试php配置的方法
2019/01/29 PHP
nicejforms——美化表单不用愁
2007/02/20 Javascript
AngularJS身份验证的方法
2016/02/17 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
JS实现添加,替换,删除节点元素的方法
2016/06/30 Javascript
Vue 父子组件的数据传递、修改和更新方法
2018/03/01 Javascript
微信小程序实现自上而下字幕滚动
2018/07/14 Javascript
浅谈Angularjs中不同类型的双向数据绑定
2018/07/16 Javascript
Vue Autocomplete 自动完成功能简单示例
2019/05/25 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
[01:39]2014DOTA2国际邀请赛 Newbee经理CU专访队伍火力全开
2014/07/15 DOTA
Python selenium 三种等待方式解读
2016/09/15 Python
Python实现的knn算法示例
2018/06/14 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
解决vscode python print 输出窗口中文乱码的问题
2018/12/03 Python
python3 selenium自动化 frame表单嵌套的切换方法
2019/08/23 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
解决python彩色螺旋线绘制引发的问题
2019/11/23 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
.NET里面如何取得当前的屏幕分辨率
2012/12/06 面试题
七年级政治教学反思
2014/02/03 职场文书
药品采购员岗位职责
2014/02/08 职场文书
应届大专生求职信
2014/06/26 职场文书
公安机关纪律作风整顿剖析
2014/10/10 职场文书
教师批评与自我批评心得体会
2014/10/16 职场文书
2016年小学生迎国庆广播稿
2015/12/18 职场文书
mongoDB数据库索引快速入门指南
2022/03/23 MongoDB
我们认为中短波广播场强仪的最佳组合
2022/04/05 无线电