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

我要说的是，您不应通过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 2

为了完成前面的回答，我们可以在 CSS 中使用以下代码，以免忘记辅助功能；

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

确实，有些人拥有 disorders of the vestibular systems 并且已将浏览器配置为减少动画和动作

Answer 3

尝试一下：

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

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

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

Answer 5

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

如何动画滚动到顶部JavaScript

5 个答案: