Javascript 如何减慢滚动速度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33686523/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make slow the Scroll-Top Speed
提问by Aariba
ScrollTop is a jquery plugin (go to top of page), trying to make slow Scroll Speed, but not working. I have changed scrollSpeed : 'fast',to scrollSpeed : 'slow',but it still fast, nothing change.
ScrollTop 是一个 jquery 插件（转到页面顶部），试图降低滚动速度，但不起作用。我已更改scrollSpeed : 'fast',为scrollSpeed : 'slow',但它仍然很快，没有任何变化。
JS:
JS：
$.fn.extend({
addScrollTop: function(options) {
var defaults = {
useObjWindow : false,
scrollSpeed : 'fast',
zIndex: '99'
}
var options = $.extend(defaults, options);
if($('body').find('.scrollTop-btn').length == 0) {
$('body').append('<div class="scrollTop-btn" style="display:none;"><i class="fa fa-chevron-up"></i></div>');
}
if(options.useObjWindow) {
var parentWindow = this;
var scrollWindow = this;
}
else {
var parentWindow = window;
var scrollWindow = 'html, body';
}
$(document).ready(function() {
$('.scrollTop-btn').on('click', function() {
$(scrollWindow).animate({scrollTop:0}, options.scrollSpeed);
});
$(parentWindow).scroll(function() {
$('.scrollTop-btn').hide();
var aTop = $('.scrollTop-btn').height() + 20;
if($(this).scrollTop() >= (aTop + 20)) {
$('.scrollTop-btn').css('z-index', options.zIndex);
$('.scrollTop-btn').show();
}
else {
if($('.scrollTop-btn').is(":visible")) {
$('.scrollTop-btn').hide();
}
}
});
});
}
});
Call:
称呼：
jQuery(document).ready(function() {
jQuery("body").addScrollTop();
});
How to make it slower or smoother, when it go to top?
当它到达顶部时，如何使它更慢或更平滑？
回答by Azad
use jquery animate()
使用 jquery 动画（）
$('html,body').animate({ scrollTop: 0 }, 'slow');
refer this stack overflow question
参考这个堆栈溢出问题
回答by Husam Ebish
Only with CSS:
仅使用 CSS：
html {
scroll-behavior: smooth;
}
回答by Simon Berton
If you want you can customize how much time you would like the "scrolling" to last. Or do something else when scroll effect is finished.
如果您愿意，您可以自定义您希望“滚动”持续多长时间。或者在滚动效果完成后做其他事情。
I have a: <a href="#" class="scrollToTop">
我有一个： <a href="#" class="scrollToTop">
And want to scroll to an element with class "beginning"
并希望滚动到类“开始”的元素
$('.scrollToTop').on('click', function(event){
event.preventDefault();
$('html, body').stop().animate({scrollTop: $('.beginning').offset().top}, 500);
});
The last part where you have the 500. You can set there how much time you want the effect to last. In milliseconds.
最后一部分你有 500。你可以在那里设置你想要效果持续多长时间。以毫秒为单位。
