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?

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

 

 

TABLE OF CONTENTS

 

 

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

 

 

 

TUTORIAL VIDEO

 

1) HTML CSS SMOOTH SCROLL

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

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

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

<div id="top" onclick="ss('bottom');">
  Go to bottom
</div>
 
<div id="bottom" onclick="ss('top');">
  Go to top
</div>

 

3B) THE JAVASCRIPT

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”.

 

 

 

COMPATIBILITY CHECKS

• CSS Scroll Behavior – CanIUse
• Scroll Into View – CanIUse

 

LINKS & REFERENCES

• Smooth Scroll – MDN
• Scroll Into View – MDN
• Scroll – MDN
• Scroll By – MDN

 

INFOGRAPHIC CHEAT SHEET