首页 > 编程 > JavaScript > 正文

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

2019-11-19 16:38:17
字体:
来源:转载
供稿:网友

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

关键代码:

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

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表