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平滑滚动到顶部 jquery滚动到顶部