如何使用JavaScript实现滚动到顶部的动画效果

Question

我有两个拥有相同功能的网站。它在一个网站上运行正常，在另一个网站上却不能正常工作。

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旁边会有一个数字出现在控制台中，但该函数从未执行。

谢谢

- RandomDeveloper

---

看起来你的脚本运行正常。 - Chaska

是的，看起来它可行。具体问题是什么？ - alesssz

基本上它不会滚动到顶部。当查看页面底部时，点击“滚动到顶部”可以在左下角看到一条消息：file:///C:/users/documents/website/index.html#。目前我的网站是本地保存的。 - RandomDeveloper

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>

- Mohammad Mahdi Kabir

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>

关于requestAnimationFrame的更多信息:

https://dev59.com/uKTja4cB1Zd3GeqPJu87#46072227

- Rickard Elimää

---

谢谢！可以看到它在别人的电脑上可行，但是在我的电脑上不行。开始怀疑这是否与我的HTML有关。 - RandomDeveloper

html,body{ width: 100%; height: 100%; margin: 0px; padding: 0px; overflow-x: hidden; font-family: 'Raleway', sans-serif; }以上是我所拥有的全部内容。 - RandomDeveloper

那就是解决方案——移除了溢出并且已经起作用！感谢Rickard！ - RandomDeveloper

现在我遇到的问题是，在移动版本上有一个空白边距，而overflow-x：hidden则可以解决这个问题。 - RandomDeveloper

Answer 3

为了补充之前的答案，我们可以使用以下代码来使CSS符合易用性标准。

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

实际上，一些人存在装置系统障碍，他们会设置浏览器以减少动画和运动。

- Alice 33

---

非常好的观点。忽略那些喜欢减少动态效果的用户是一个经常被忽视的问题。 - Zed

Answer 4

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

- idembele70

---

这是与此其他答案相同的解决方案。 - Eric Aya

Answer 5

(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/

- Ravi Chauhan

---

现在不再需要 JQuery 了。Javascript 的 DOM 操作已经赶上了它。 - Rickard Elimää