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

 更新时间:2017年05月08日 11:33:23   作者:sunny_desmond  
这篇文章主要为大家详细介绍了基于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 }); 

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

相关文章

  • JqGrid web打印实现代码

    JqGrid web打印实现代码

    最近,项目使用了JqGrid,但需要打印Grid里面的数据。使用的是CSS属性中的Media媒体类型来控制打印样式。
    2011-05-05
  • jQuery中ajax和post处理json的不同示例对比

    jQuery中ajax和post处理json的不同示例对比

    用了post方法去处理ajax回调的json数据,死活取不到,后台就是有json返回了,关于这个问题的解决方法如下,你若遇到可以看看
    2014-11-11
  • Jquery元素追加和删除的实现方法

    Jquery元素追加和删除的实现方法

    下面小编就为大家带来一篇Jquery元素追加和删除的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • jquery之基本选择器practice(实例讲解)

    jquery之基本选择器practice(实例讲解)

    下面小编就为大家带来一篇jquery之基本选择器practice(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • table行随鼠标移动变色示例

    table行随鼠标移动变色示例

    当鼠标移到table行时会随着改变颜色,在视觉上有一定的辨别效果,下面有个不错的示例,大家不妨参考下
    2014-05-05
  • jquery中animate的stop()方法作用实例分析

    jquery中animate的stop()方法作用实例分析

    这篇文章主要介绍了jquery中animate的stop()方法作用,实例分析了animate的stop()方法在视频播放代码中的使用技巧,感兴趣的朋友可以对比分析一下带stop方法与不带stop方法运行效果的区别,需要的朋友可以参考下
    2015-01-01
  • jQuery EasyUI中对表格进行编辑的实现代码

    jQuery EasyUI中对表格进行编辑的实现代码

    对表格进行增删改后一次性保存或回滚的发生相当有用。参照官方的教程例子做了个用户管理的小例子。
    2010-06-06
  • jQuery实现长文字部分显示代码

    jQuery实现长文字部分显示代码

    在网页上只有一个小区域,但是说明性的文字又很长,下面这段脚本实现的是长文字的部分显示,有类似需求的朋友可以参考下哈,希望对你有所帮助
    2013-05-05
  • jquery 截取字符串的实现

    jquery 截取字符串的实现

    不错的用jquery实现的,字符串截取功能实现代码。
    2009-06-06
  • jquery中show()、hide()和toggle()用法实例

    jquery中show()、hide()和toggle()用法实例

    这篇文章主要介绍了jquery中show()、hide()和toggle()用法,以实例形式分析了show()、hide()和toggle()在显示、隐藏及切换等应用技巧,需要的朋友可以参考下
    2015-01-01

最新评论