How to Animate Scroll to Top JavaScript

Question

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.

It doesn't scroll to the top basically. When looking at the bottom of page, when hitting scroll to top can see a message at the bottom left saying: file:///C:/users/documents/website/index.html#. My website at the moment is locally saved. — RandomDeveloper
– RandomDeveloper, Commented Oct 4, 2019 at 5:10

Mohammad Mahdi Kabir · Accepted Answer · 2019-10-03 07:19:27Z

58

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>

answered Oct 3, 2019 at 7:19

Mohammad Mahdi Kabir

8001 gold badge5 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rickard Elimää · Accepted Answer · 2019-10-03 07:16:09Z

11

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

answered Oct 3, 2019 at 7:16

Rickard Elimää

7,6763 gold badges18 silver badges36 bronze badges

4 Comments

RandomDeveloper Over a year ago

Thanks! Can see visibly works, just doesn't work on mine. Starting to wonder if this has anything to do with my html

RandomDeveloper Over a year ago

html,body{ width: 100%; height: 100%; margin: 0px; padding: 0px; overflow-x: hidden; font-family: 'Raleway', sans-serif; } The above is the only thing I have

RandomDeveloper Over a year ago

that was the solution - removed overflow and has worked! thanks Rickard!

RandomDeveloper Over a year ago

just have a problem now is that on mobile version got a blank margin which overflow-x - hidden was resolving

Alice 33 · Accepted Answer · 2021-07-09 18:47:05Z

8

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

answered Jul 9, 2021 at 18:47

Alice 33

811 silver badge4 bronze badges

1 Comment

Zed Over a year ago

Really good point. Ignoring users who prefer reduced motion is too commonly overlooked.

Ravi Chauhan · Accepted Answer · 2019-10-03 07:24:49Z

-2

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

answered Oct 3, 2019 at 7:24

Ravi Chauhan

1,53513 silver badges30 bronze badges

1 Comment

Rickard Elimää Over a year ago

JQuery isn't needed nowadays. Javascript's DOM manipulation has caught up.

Collectives™ on Stack Overflow

How to Animate Scroll to Top JavaScript

4 Answers 4

Comments

4 Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

4 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related