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 29 jQuery
jquery操作ul的一些操作笔记整理(干货)
Aug 31 jQuery
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
jQuery基于Ajax实现读取XML数据功能示例
May 31 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
jQuery实现的简单日历组件定义与用法示例
Dec 24 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
jQuery实现推拉门效果
Oct 19 jQuery
基于jQuery拖拽事件的封装
Nov 29 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
Thinkphp模板中使用自定义函数的方法
2012/09/23 PHP
PHP 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
php中get_cfg_var()和ini_get()的用法及区别
2015/03/04 PHP
Laravel 集成 Geetest验证码的方法
2018/05/14 PHP
PHP实现关键字搜索后描红功能示例
2019/07/03 PHP
tp5.1 框架数据库常见操作详解【添加、删除、更新、查询】
2020/05/26 PHP
用JS实现的一个include函数
2007/07/21 Javascript
Javascript中的isNaN函数使用说明
2011/11/10 Javascript
一样的table?不一样的table(可编辑状态table)
2012/09/19 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
jquery多选项卡效果实例代码(附效果图)
2013/03/23 Javascript
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
对JavaScript中this指针的新理解分享
2015/01/31 Javascript
JS实现随机乱撞彩色圆球特效的方法
2015/05/05 Javascript
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
jQuery对table表格进行增删改查
2020/12/22 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
2018/09/03 Javascript
React 组件中的 bind(this)示例代码
2018/09/16 Javascript
JavaScript中常用的简洁高级技巧总结
2019/03/10 Javascript
vue父子组件的通信方法(实例详解)
2019/11/10 Javascript
OpenLayers加载缩放控件使用方法详解
2020/09/25 Javascript
从零学Python之入门(四)运算
2014/05/27 Python
Python之re操作方法(详解)
2017/06/14 Python
Python实现可自定义大小的截屏功能
2018/01/20 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
python修改FTP服务器上的文件名
2019/09/11 Python
Python调用系统命令os.system()和os.popen()的实现
2020/12/31 Python
编程实现当输入某产品代码则打印出该产品记录的功能
2014/05/03 面试题
教育学专业毕业生的自我评价
2013/11/21 职场文书
会计主管岗位职责
2014/01/03 职场文书
运动会广播稿30字
2014/01/21 职场文书
2019最新版劳务派遣管理制度
2019/08/16 职场文书
关于Python中*args和**kwargs的深入理解
2021/08/07 Python
vue使用element-ui按需引入
2022/05/20 Vue.js