如何动画 滚动到顶部 JavaScript

Question

我有2个具有相同功能的网站。它适用于其中一个网站，不适用于另一个网站。

script.js：

function scrollToTop(){
var timerHandle = setInterval(function() {
if (document.body.scrollTop != 0 || document.documentElement.scrollTop != 0)
window.scrollBy(0,-50); else clearInterval(timerHandle); },10);
}

HTML

<ul class="footer-navigation">
<li><a class="back" id="backtoTop" onclick="scrollToTop();return false;"href="#">&uarr;Back to Top</a></li>
<li><a class="home" href="#home">Home</a></li>
<li><a class="about" href="#about">About</a></li>
<li><a class="contact" href="#contact">Contact</a></li>
</ul>

它没有遇到任何错误，但似乎在"计数"。当我console.log它时，控制台中记录counting旁边有一个数字，但函数永远不会执行。

谢谢

Answer 1

试试这个：

function scrollToTop(){
window.scrollTo({top: 0, behavior: 'smooth'});
}

<div style="height: 150vh"> 
scroll down
</div>
<ul class="footer-navigation">
<li><a class="back" id="backtoTop" onclick="scrollToTop();return false;"href="#">&uarr;Back to Top</a></li>
<li><a class="home" href="#home">Home</a></li>
<li><a class="about" href="#about">About</a></li>
<li><a class="contact" href="#contact">Contact</a></li>
</ul>

Answer 2

我想说的是，您不应该通过setInterval滚动，而应该通过requestAnimationFrame滚动以避免滚动卡顿。解决您问题的一个简单解决方案也是使用 CSS 使您的滚动流畅。但是，这会影响所有滚动。

function scrollToTop(){
window.scrollTo(0, 0);
}

html {
scroll-behavior: smooth;
}

<div style="height: 150vh"> 
scroll down
</div>
<ul class="footer-navigation">
<li><a class="back" id="backtoTop" onclick="scrollToTop()"href="#">&uarr;Back to Top</a></li>
<li><a class="home" href="#home">Home</a></li>
<li><a class="about" href="#about">About</a></li>
<li><a class="contact" href="#contact">Contact</a></li>
</ul>

更多关于请求动画帧：

https://stackoverflow.com/a/46072227/5526624

Answer 3

为了完成前面的答案，我们可以在 CSS 中使用以下代码，以免忘记可访问性;

@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}

事实上，有些人患有前庭系统疾病，并且已经配置了浏览器以减少动画和动作

Answer 4

(function($){
'use strcit';
$.ScrollUpToTop = function(options){
// Default options
options = $.extend({}, options);
// Variables
var $btnScroll = $("<button id="ScrollUpToTop">^</button>").hide();
var $body = $(document.body);
// insert scroll up to top button
$($body).append($btnScroll);
// attach click event on button
$($btnScroll).click(function(e){
e.preventDefault();
$($body).animate(
{scrollTop:0},
800
);
});
$(window).scroll(function(){
if( $(window).scrollTop() > 0) {
$($btnScroll).fadeIn();
} else {
$($btnScroll).fadeOut();
}
});
};
$.ScrollUpToTop();
})(jQuery);

请点击此链接。

https://www.jqueryscript.net/demo/Super-Simple-Scroll-Up-To-Top-Plugin-with-jQuery/

您还可以从使用源获取参考。

view-source：https：//www.jqueryscript.net/demo/Super-Simple-Scroll-Up-To-Top-Plugin-with-jQuery/

Answer 5

在纯JavaScript中使用这个兄弟，不需要css：window.scrollTo({ top: 0, behavior: "smooth" })