Smooth Scroll In HTML Javascript (Very Simple Examples)

Welcome to a tutorial on how to set smooth scroll in HTML and Javascript. So you want add a “nice scroll effect” to your project?

The easiest way to enable smooth scroll is to change the CSS scroll behavior property – html { scroll-behavior: smooth }

Yep, that’s all it takes. But let us walk through some more methods and examples – Read on!

 

 

TABLE OF CONTENTS

 

DOWNLOAD & NOTES

Here is the download link to the example code, so you don’t have to copy-paste everything.

 

EXAMPLE CODE DOWNLOAD

Click here to download | Example on CodePen

The example code is released under the MIT license, so feel free to build on top of it or use it in your own project.

 

SORRY FOR THE ADS...

But someone has to pay the bills, and sponsors are paying for it. I insist on not turning Code Boxx into a "paid scripts" business, and I don't "block people with Adblock". Every little bit of support helps.

Buy Me A Coffee Code Boxx eBooks

 

 

SMOOTH SCROLL IN HTML JAVASCRIPT

All right, let us now get into the examples of how to do smooth scroll in HTML and Javascript.

 

TUTORIAL VIDEO

 

1) HTML CSS SMOOTH SCROLL

1-css.html
<!-- (A) ENABLE SMOOTH SCROLL -->
<style>
html { scroll-behavior: smooth; }
</style>

<!-- (B) SMOOTH SCROLL DEMO -->
<a id="top" href="#bottom">Scroll to bottom</a>
<div class="spacer"></div>
<a id="bottom" href="#top">Scroll to top</a>

As in the introduction, setting scroll-behavior: smooth is all we need – CSS will do the rest of the magic.

 

 

2) JAVASCRIPT SMOOTH SCROLL

2A) THE HTML

2-js.html
<!-- (A) SCROLL TO EXACT POSITION -->
<div id="top" onclick="demoA()">
  Scroll to 500 px from the top.
</div>
 
<!-- (B) SCROLL FROM CURRENT POSITION -->
<div onclick="demoB()">
  Scroll down 100 px from current position.
</div>
 
<!-- (C) SCROLL TO HTML ELEMENT -->
<div onclick="demoC()">
  Scroll to top.
</div>

 

2B) THE JAVASCRIPT

2-js.js
// (A) SCROLL TO EXACT POSITION
function demoA () {
  window.scroll({
    top: 500, behavior: "smooth"
  });
}
 
// (B) SCROLL FROM CURRENT POSITION
function demoB () {
  window.scrollBy({
    top: 100, behavior: "smooth"
  });
}
 
// (C) SCROLL TO HTML ELEMENT
function demoC () {
  document.getElementById("top").scrollIntoView({
    behavior: "smooth"
  });
}

Smooth scroll can also be programmatically triggered in Javascript, there are 3 essential functions:

  • window.scroll() Go to the specified position on the page (from the top, bottom, left, right).
  • window.scrollBy() Scroll from the current position.
  • ELEMENT.scrollIntoView() Scroll to the specified element.

 

 

3) MANUAL SMOOTH SCROLL

3A) THE HTML

3-manual.html
<div id="top" onclick="ss('bottom');">
  Go to bottom
</div>
 
<div id="bottom" onclick="ss('top');">
  Go to top
</div>

 

3B) THE JAVASCRIPT

3-manual.js
function ss (id) {
  // (A) SETTINGS & FLAGS
  var step = 30, // move n pixels per step
      speed = 10, // scroll every n ms
      now = window.scrollY, // current y position
      to = document.getElementById(id).offsetTop; // target y position
 
  // (B) SCROLL DOWNWARD
  if (to > now) {
    var roll = () => {
      now += step;
      if (now > to) { now = to; }
      window.scroll({top: now});
      if (now < to) { window.setTimeout(roll, speed); }
    };
  }
 
  // (C) SCROLL UPWARD
  else {
    var roll = () => {
      now -= step;
      if (now < to) { now = to; }
      window.scroll({top: now});
      if (now > to) { window.setTimeout(roll, speed); }
    };
  }
 
  // (D) GO!
  roll();
}
  • Sadly, there is no way to control the scroll speed in both scroll-behavior and Javascript scroll() at the time of writing.
  • The only way is to manually create your own scroll function – This one calls window.scroll() recursively using timers until it reaches the specified HTML element.
  • TLDR – Set step and speed to control the “scroll speed”.

 

 

EXTRAS

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

 

COMPATIBILITY CHECKS

 

LINKS & REFERENCES

 

INFOGRAPHIC CHEAT SHEET

Smooth Scroll WIth CSS & JS (click to enlarge)

 

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you have anything to share 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 *