欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-29 21:18:36
点击一个固定按钮,平滑的滚动到窗口顶部的这种功能,在前端开发是相当常见的,如图: 关键代码: $.fn.scrollto = function(option...

点击一个固定按钮,平滑的滚动到窗口顶部的这种功能,在前端开发是相当常见的,如图:

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 }); 

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