时间戳

首页 > 解决方案 > 如何动画滚动到顶部 JavaScript

javascript - 如何动画滚动到顶部 JavaScript

问题描述

我有 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但函数永远不会执行。

谢谢

标签： javascripthtml

解决方案

尝试这个：

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>

推荐阅读