CODEWITHSUNDEEP
javascriptjquery
user3597784
user3597784

Reputation: 285

JS for smooth scroll to the bottom of the page

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?

Upvotes: 29

Views: 38971

Answers (5)

SHG
SHG

Reputation: 2616

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.

Upvotes: 2

Josep Vicent Ibanez
Josep Vicent Ibanez

Reputation: 1758

With pure JS:

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

and to the top as:

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

Upvotes: 63

Unmitigated
Unmitigated

Reputation: 89394

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/[email protected]/src/smoothscroll.min.js" integrity="sha384-UdJHYJK9eDBy7vML0TvJGlCpvrJhCuOPGTc7tHbA+jHEgCgjWpPbmMvmd/2bzdXU" crossorigin="anonymous"></script>
<button>Scroll to bottom</button>

Upvotes: 2

Gibolt
Gibolt

Reputation: 47197

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

Upvotes: 2

dfsq
dfsq

Reputation: 193291

There is no such thing as scrollToBottom. Try this:

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

Upvotes: 8

Related Questions