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实现静态搜索功能(可输入搜索文字)
Mar 28 jQuery
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
深入浅析angular和vue还有jquery的区别
Aug 13 jQuery
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
基于jQuery实现可编辑的表格
Dec 11 jQuery
jQuery操作动画完整实例分析
Jan 10 jQuery
jQuery-App输入框实现实时搜索
Nov 19 jQuery
jquery实现淡入淡出轮播图效果
Dec 13 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
3种平台下安装php4经验点滴
2006/10/09 PHP
PHP 无限分类三种方式 非函数的递归调用!
2011/08/26 PHP
一个简单且很好用的php分页类
2013/10/26 PHP
php编程每天必学之验证码
2016/03/03 PHP
初识PHP中的Swoole
2016/04/05 PHP
PHP中new static()与new self()的比较
2016/08/19 PHP
php检测mysql表是否存在的方法小结
2017/07/20 PHP
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
十分钟打造AutoComplete自动完成效果代码
2009/12/26 Javascript
JavaScript创建闭包的两种方式的优劣与区别分析
2015/06/22 Javascript
用js读写cookie的简单方法(推荐)
2016/08/08 Javascript
vue.js实现请求数据的方法示例
2017/02/07 Javascript
Express+Nodejs 下的登录拦截实现代码
2017/07/01 NodeJs
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
2017/08/21 Javascript
js注册时输入合法性验证方法
2017/10/21 Javascript
JS组件系列之Gojs组件 前端图形化插件之利器
2017/11/29 Javascript
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
微信小程序订阅消息(java后端实现)开发
2020/06/01 Javascript
详解vue中v-on事件监听指令的基本用法
2020/07/22 Javascript
python用户评论标签匹配的解决方法
2018/05/31 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
Python如何获得百度统计API的数据并发送邮件示例代码
2019/01/27 Python
详解Python中的各种转义符\n\r\t
2019/07/10 Python
python 实现仿微信聊天时间格式化显示的代码
2020/04/17 Python
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
Everlast官网:拳击、综合格斗和健身相关的体育用品
2020/08/03 全球购物
中文专业毕业生自荐书范文
2014/01/04 职场文书
高中毕业自我评价
2014/02/08 职场文书
户外拓展活动方案
2014/02/11 职场文书
机械专业求职信
2014/05/25 职场文书
爱护公共设施的标语
2014/06/24 职场文书
年终晚会活动方案
2014/08/21 职场文书
工厂标语大全
2014/10/06 职场文书
求职信:会计求职的写作技巧
2019/04/24 职场文书
如何在pycharm中快捷安装pip命令(如pygame)
2021/05/31 Python
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript