本文主要为大家详细介绍了基于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 });相关推荐:
js控制滚动条缓慢滚动到顶部实现代码_javascript技巧
以上就是关于jquery平滑滚动到顶部的插件的详细内容,更多请关注php中文网其它相关文章!
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号