基于JQ的平滑滚动到顶部插件

来源:互联网 发布:淘宝联盟17年还赚钱吗 编辑:程序博客网 时间:2024/05/23 01:23

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



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



0 0