How to Animate Scroll to Top JavaScript

user_11207965 0
Viewed 16142

I have got 2 websites with the same function. It works on one of the websites, doesn't work on the other.

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>

It doesn't hit any error but it seems as though it is "counting". When I console.log it there's a number in the console next to the logged counting but function never executes.

Thanks

html javascript
5 Answers

Try this:

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>

user_118409670

I would say that you shouldn't scroll via a setInterval but through requestAnimationFrame to avoid jankiness in the scroll. A simple solution to your problem would also to use CSS to make your scrolling smooth. However, this affects all scrolling.

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>

More about requestforanimationframe:

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

user_55266240

To complete the previous answers, we can use the following code to the CSS so as not to forget accessibility ;

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

Indeed, there are people who have disorders of the vestibular systems and who have configured their browser to reduce animations and movements

user_115010430 
(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);

Please follow this link.

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

and you can also get reference from using source.

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

user_25671690

use this bro in pure javascript no css needed : window.scrollTo({ top: 0, behavior: "smooth" })

user_145166280
Related