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 tip提示插件(实例分享)
Apr 28 jQuery
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
jQuery访问浏览器本地存储cookie、localStorage和sessionStorage的基本用法
Oct 20 jQuery
jquery手机触屏滑动拼音字母城市选择器的实例代码
Dec 11 jQuery
jQuery 操作 HTML 元素和属性的方法
Nov 12 jQuery
jQuery ajax仿Google自动提示SearchSuggess功能示例
Mar 28 jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
jQuery实现手风琴特效
Jan 11 jQuery
jQuery实现鼠标拖动图片功能
Mar 04 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
用phpmyadmin更改mysql5.0登录密码
2008/03/25 PHP
PHP中redis的用法深入解析
2014/02/20 PHP
利用PHP抓取百度阅读的方法示例
2016/12/18 PHP
PHP 实现手机端APP支付宝支付功能
2018/06/07 PHP
JQuery 学习笔记 选择器之六
2009/07/23 Javascript
javascript 隔行换色函数代码
2010/10/24 Javascript
JQuery动态给table添加、删除行 改进版
2011/01/19 Javascript
不同的jQuery API来处理不同的浏览器事件
2012/12/09 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
jquery实现页面常用的返回顶部效果
2016/03/04 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
AngularJS 表达式详细讲解及实例代码
2016/07/26 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
2017/08/18 Javascript
分分钟学会vue中vuex的应用(入门教程)
2017/09/14 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
2018/05/16 jQuery
vue通过cookie获取用户登录信息的思路详解
2018/10/30 Javascript
浅谈Javascript中的对象和继承
2019/04/19 Javascript
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
Selenium获取登录Cookies并添加Cookies自动登录的方法
2020/12/04 Python
有趣的流行文化T恤、马克杯、手机壳和更多:Look Human
2019/01/07 全球购物
建筑项目策划书
2014/01/13 职场文书
清洁工岗位职责
2014/01/29 职场文书
学生会干部自荐信
2014/02/04 职场文书
音乐专业自荐信
2014/02/07 职场文书
商场促销活动方案
2014/02/08 职场文书
人事部专员岗位职责
2014/03/04 职场文书
爱情保证书大全
2014/04/29 职场文书
第二课堂活动总结
2014/05/07 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
暑假社会实践证明格式
2014/10/28 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
努力工作保证书
2015/02/28 职场文书
现货白银电话营销话术
2015/05/29 职场文书
护理心得体会范文
2016/01/22 职场文书
mysql查询的控制语句图文详解
2021/04/11 MySQL