jquery平滑滚动到顶部插件使用详解
程序员文章站
2022-06-29 21:18:36
点击一个固定按钮,平滑的滚动到窗口顶部的这种功能,在前端开发是相当常见的,如图:
关键代码:
$.fn.scrollto = function(option...
点击一个固定按钮,平滑的滚动到窗口顶部的这种功能,在前端开发是相当常见的,如图:
关键代码:
$.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 });
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。