JS for smooth scroll to the bottom of the page

Question

I have a JS to make a smooth scroll from the bottom of the page to the top with this and it works:

<script>

     $("a[href='#top']").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return true;
  });
</script>

But now I want to make a smooth scroll from the top to the bottom, I tried it with this:

 <script>

     $("a[href='#footer']").click(function() {
     $("html, body").animate({ scrollToBottom: 0 }, "slow");
     return true;
  });
</script>`

It doesn't work, it's not a smooth scroll. Does anyone know what's wrong with this?

Banzy · Answer 1 · 2021-09-13T16:52:06.887

55

With pure JS:

 window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' })

and to the top as:

 window.scrollTo({ top: 0, behavior: 'smooth' })

edited Sep 13 '21 at 16:52

answered Feb 24 '20 at 10:20

Banzy

1,590
15
14

2

This should be marked as a valid answer. Thanks! – krisanalfa Sep 01 '21 at 08:45
1

Simple and smooth, pure JS without a library and it works in 2022 as well. – cdub Aug 21 '22 at 03:59

score 8 · Accepted Answer · answered May 24 '14 at 10:31

8

There is no such thing as scrollToBottom. Try this:

$("html, body").animate({ scrollTop: document.body.scrollHeight }, "slow");

answered May 24 '14 at 10:31

dfsq

191,768
25
236
258

3

what is it like without jquery? – Fed Mar 12 '18 at 19:00
1

@FedericoCapaldo Check this out: https://stackoverflow.com/questions/8917921/cross-browser-javascript-not-jquery-scroll-to-top-animation – dfsq Mar 12 '18 at 19:27

score 2 · Answer 3 · answered Aug 03 '21 at 15:45

For a more comprehensive list of methods for smooth scrolling, see my answer here.

To scroll to the bottom of the page, the y-position can be set to document.scrollingElement.scrollHeight.

For scrolling to a certain position in an exact amount of time, window.requestAnimationFrame can be put to use, calculating the appropriate current position each time. setTimeout can be used to a similar effect when requestAnimationFrame is not supported.

/*
   @param pos: the y-position to scroll to (in pixels)
   @param time: the exact amount of time the scrolling will take (in milliseconds)
*/
function scrollToSmoothly(pos, time) {
    var currentPos = window.pageYOffset;
    var start = null;
    if(time == null) time = 500;
    pos = +pos, time = +time;
    window.requestAnimationFrame(function step(currentTime) {
        start = !start ? currentTime : start;
        var progress = currentTime - start;
        if (currentPos < pos) {
            window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos);
        } else {
            window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time));
        }
        if (progress < time) {
            window.requestAnimationFrame(step);
        } else {
            window.scrollTo(0, pos);
        }
    });
}

function scrollToSmoothly(pos, time) {
    var currentPos = window.pageYOffset;
    var start = null;
    if(time == null) time = 500;
    pos = +pos, time = +time;
    window.requestAnimationFrame(function step(currentTime) {
        start = !start ? currentTime : start;
        var progress = currentTime - start;
        if (currentPos < pos) {
            window.scrollTo(0, ((pos - currentPos) * progress / time) + currentPos);
        } else {
            window.scrollTo(0, currentPos - ((currentPos - pos) * progress / time));
        }
        if (progress < time) {
            window.requestAnimationFrame(step);
        } else {
            window.scrollTo(0, pos);
        }
    });
}

document.querySelector('button').addEventListener('click', function(e){
  scrollToSmoothly(document.scrollingElement.scrollHeight, 1000);
});

html, body {
  height: 5000px;
}

<button>Scroll to bottom</button>

The SmoothScroll.js library can be used as well, which handles more complex cases such as smooth scrolling both vertically and horizontally, scrolling inside other container elements, different easing behaviors, scrolling relatively from the current position, and more.

smoothScroll({yPos: 'end', duration: 1000});

document.querySelector('button').addEventListener('click', function(e){
  smoothScroll({yPos: 'end', duration: 1000});
});

html, body {
  height: 5000px;
}

<script src="https://cdn.jsdelivr.net/gh/LieutenantPeacock/SmoothScroll@1.2.0/src/smoothscroll.min.js" integrity="sha384-UdJHYJK9eDBy7vML0TvJGlCpvrJhCuOPGTc7tHbA+jHEgCgjWpPbmMvmd/2bzdXU" crossorigin="anonymous"></script>
<button>Scroll to bottom</button>

score 1 · Answer 4 · answered Mar 23 '21 at 21:14

1

// Scroll smoothly to the bottom
domElement.scrollTo({
  top: document.body.scrollHeight,
  behavior: 'smooth',
})

All options for scrollTo are:

top: number
left: number
behavior: 'smooth' or behavior: 'auto'

answered Mar 23 '21 at 21:14

Gibolt

42,564
15
187
127

score 0 · Answer 5 · answered Apr 06 '22 at 23:56

The accepted answer and others are correct, but wanted to add another usecase that might help someone.

In some cases, you'd need to do the scrolling inside a setTimeout()'s callback with a short delay.

function scrollToBottom() {
  window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
}

setTimeout(function() { scrollToBottom(); }, 100);

For example: you have a <button> which adds a <div> element to the bottom of the page when clicked on, and you want to scroll to the bottom so the user can see this new div. In this case, sometimes (depends on the event-loop behavior), you'd need to do the scroll inside a setTimeout() because the same action that triggers the scroll actually changes the value of document.body.scrollHeight. By delaying it, you make it use the new updated value of document.body.scrollHeight after the div was added.

JS for smooth scroll to the bottom of the page

5 Answers5