4 Ways To Scroll In Javascript – Simple Examples

Welcome to a tutorial on how to scroll in Javascript. Need to scroll to the top or bottom? Scroll to a certain element? Scroll inside an element? Things can get a little confusing, but let us solve the Javascript scroll mystery once and for all.

  1. window.scroll() will scroll to an exact specified spot on the page.
    • Use window.scroll(0, 0) to scroll to the top of the page.
    • Use window.scroll(0, document.body.scrollHeight) to scroll to the bottom of the page.
    • We can also scroll within an element using ELEMENT.scroll().
  2. scrollTo() is the same as scroll().
  3. To scroll to a specific element, use document.getElementById('ID').scrollIntoView().
  4. To scroll from the current position, use window.scrollBy().

That covers the quick basics, but read on for more detailed examples!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

QUICK SLIDES

 

TABLE OF CONTENTS

Download & Notes JS Scroll Useful Bits & Links
The End

 

DOWNLOAD & NOTES

Firstly, here is the download link to the example code as promised.

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK NOTES

If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

 

JAVASCRIPT SCROLL

All right, let us now get into the examples and ways to scroll in Javascript.

 

1) WINDOW SCROLL

1-win-scroll.html
<!-- (A) SCROLL TO EXACT LOCATION -->
<input type="button" value="Scroll To 500 PX From Top"
       onclick="window.scroll(0, 500)"/>

<!-- (B) DUMMY DIV -->
<div style="height: 2000px; background: #fea;"></div>

<!-- (C) SCROLL TO TOP -->
<input type="button" value="Scroll To Top"
       onclick="window.scroll(0, 0)"/>

<!-- (D) SMOOTH SCROLL -->
<input type="button" value="Smooth Scroll To Top"
       onclick="window.scroll({top:0, left:0, behavior:'smooth'})"/>

This should be easy enough, window.scroll(X, Y) will simply scroll to your designated location of the page. The not-so-straightforward part is doing smooth scroll, we need to define an object to do that – {top:0, left:0, behavior:'smooth'}.

 

 

2) SCROLL IN ELEMENT

2-element-scroll.html
 <!-- (A) SCROLL TO EXACT LOCATION IN ELEMENT -->
<input type="button" value="Scroll To Deer"
       onclick="document.getElementById('demo').scroll(170, 220)"/>

<!-- (B) RESET SCROLL -->
<input type="button" value="Scroll Reset"
       onclick="document.getElementById('demo').scroll(0, 0)"/>

<!-- (C) SMOOTH SCROLL -->
<input type="button" value="Smooth Reset Scroll"
       onclick="document.getElementById('demo').scroll({top:0, left:0, behavior:'smooth'})"/>

<!-- (D) DUMMY DIV -->
<div id="demo" style="width: 300px; height: 200px; overflow: auto;">
  <img src="deer.jpg"/>
</div>

If you want to scroll within an element, use ELEMENT.scroll() – All the mechanics are the same. Captain Obvious note, the element itself must have an overflow set (must have scrollbars) for scroll to work.

 

 

3) SCROLL INTO VIEW

3-scroll-view.html
<!-- (A) SCROLL INTO VIEW -->
<input type="button" value="Scroll To Deer"
       onclick="document.getElementById('demo').scrollIntoView()"/>

<!-- (B) SMOOTH SCROLL CENTER -->
<input type="button" value="Smooth Scroll To Deer"
       onclick="document.getElementById('demo').scrollIntoView({behavior: 'smooth', block: 'center'})"/>

<!-- (C) DUMMY DIV -->
<div style="height: 2000px; background: #fea;"></div>
<img id="demo" src="deer.jpg"/>
<div style="height: 2000px; background: #fea;"></div>

If you want to scroll to an element, no need to do crazy calculations. Simply use ELEMENT.scrollIntoView(), and the browser will do the rest of the magic. Take note that by default, this will place the element at the top of the screen.

  • We can control the vertical placement with the block option. Possible values are start, center, end, nearest.
  • We can control the horizontal placement with the inline option. Possible values are start, center, end, nearest.

 

4) SCROLL BY

4-scroll-by.html
<div style="height: 2000px; background: #fea;"></div>

<!-- (A) SCROLL UP -->
<input type="button" value="Scroll Up 100 PX"
       onclick="window.scrollBy(0, -100)"/>

<!-- (B) SCROLL DOWN -->
<input type="button" value="Scroll Down 100 PX"
       onclick="window.scrollBy(0, 100)"/>

<!-- (C) SMOOTH SCROLL DOWN -->
<input type="button" value="Smooth Scroll Down 100 PX"
       onclick="window.scrollBy({top: 100, behavior: 'smooth'})"/>

<div style="height: 2000px; background: #fea;"></div>

Lastly, we have scrollBy(), which will scroll from the current position… Personally, I don’t find this to be very useful unless you are trying to scroll a fixed-sized image or something.

 

OTHER SCROLL MECHANICS

Firefox has 2 more scroll mechanics:

But yep, this is specifically “Firefox only” stuff. So I will just leave this here as an “honorable mention”.

 

 

USEFUL BITS & LINKS

That’s all for the tutorial, and here is a small section on some extras and links that may be useful to you.

 

LINKS & REFERENCES

Function Description Reference
window.scroll() Scroll to the exact location on the window. Click Here
ELEMENT.scroll() Scroll to the exact location in the element. Click Here
scrollTo() Same as scroll(). Click Here
ELEMENT.scrollIntoView() Scroll to a specific element. Click Here
window.scrollBy() Scroll a number of pixels from the current position. Click Here

 

INFOGRAPHIC CHEAT SHEET

Ways To Scroll In Javascript (click to enlarge)

 

THE END

Thank you for reading, and we have come to the end. I hope that it has helped you to better understand, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *