平滑滚动到顶部不起作用

Question

我正在使用网站上的顶部箭头以平滑滚动移动到顶部。现在它移动到顶部，但不是平稳移动。

我用来获得平滑滚动的 js 是

$(function() {
$('a.page-scroll').bind('click', function(event) {
console.log("scroll");
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});

BUt 它不工作.. 杰斯菲德尔 https://jsfiddle.net/36m5kp00/

我使用的jquery是，

<script src="scripts/controllers/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Answer 1

使用这个

$(function() {
$('a.page-scroll').bind('click', function(event) {
$("html, body").animate({ scrollTop: 0 }, 1500);
event.preventDefault();
});
});

Answer 2

实际上，如果您想使用自定义缓动方法(如easeInOutExpo(，则需要添加jquery 缓动插件。

注意：jQuery附带2种缓动方法linear和swing。参考资料： https://api.jqueryui.com/easings/

在这里你可以从这里得到它： https://cdnjs.com/libraries/jquery-easing

它运行良好，请在此处检查：https://jsfiddle.net/ashishanexpert/36m5kp00/4/

你的工作代码应该是这样的：

$(window).scroll(function() {
if ($(this).scrollTop()) {
$('#letTop:hidden').stop(true, true).fadeIn();
} else {
$('#letTop').stop(true, true).fadeOut();
}
});
$(function() {
$('a.page-scroll').bind('click', function(event) {
console.log("scroll");
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});