Smooth scroll without the use of jQuery

javascript

smooth-scroll

scrollintoview

window-scrollto

byAnton Shumikhin·Nov 28, 2024

Ready for smooth scrolling fun? Use the native scrollIntoView method:

// Scroll to the party 🥳
document.getElementById('target').scrollIntoView({ behavior: 'smooth' });

That's neat right? Want to apply this globally to all hash-links? Here you go:

// Make all internal links slide like butter!
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
  anchor.addEventListener('click', e => {
    e.preventDefault();
    // Off to the smooth slide we go! 🛷
    document.querySelector(anchor.getAttribute('href')).scrollIntoView({ behavior: 'smooth' });
  });
});

This turns jumpy anchor jumps into sweet, sweet smooth transitions.

Breakdown: An Ode to Smooth Scroll

Closer Look at `scrollIntoView`

The scrollIntoView method offers an options object for fine tuning:

element.scrollIntoView({
  behavior: 'smooth', // Who likes a bumpy ride? Not me!
  block: 'start',     // It's like a VIP pass right to the top
  inline: 'nearest'   // Keeping things neat and tidy
});

Custom Scroll Magic with `window.scrollTo`

Need complete control? Here's your wand: window.scrollTo. Witness the magic:

const scrollToTop = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    // No turbulence on this flight! ✈️
    window.scrollTo(0, c - c / 8);
  }
};

scrollToTop();

This marvel lets you smooth scroll to the pinnacle of the document, easing as it ascends.

Dealing with the Bumps (Edge Cases)

While scroll-behavior: smooth is now part of the cool kids club most browsers are in, always prepare for unexpected guests:

User-led April fools: Users might spin the wheel or touch while the smooth scroll is having its moment. Monitor wheel and touchmove events to tackle this.
Dynamic Content Tricksters: The DOM could play tricks by changing the target position due to image loads or style changes. Be ready, stay sharp!

CSS for Better Scroll Behavior

The CSS Way to Smooth Scroll

Ever hear of HTML and CSS ruling the world? Here's scroll-behavior featuring as a CSS property:

html {
  scroll-behavior: smooth;
}

This little trick lets you enjoy smooth scrolling for all anchor tags and programmatic scrolls.

Scroll Enhancement, CSS Style

scroll-behavior is what one might call progressive enhancement. Even if your browser thinks scroll-behavior is too cool for it, scrolling still works as expected, albeit without the smoothness.

Pro-tips for Smooth Scrolling

Performance Optimization

To ensure your animation doesn't transform into slow-motion, use window.requestAnimationFrame for an optimized, battery-friendly experience.

Catering to All Browsers

Even though we love living on the edge, ponder about using a polyfill for older, classical browsers. The Smoothscroll Polyfill addressed in the links below can come to your rescue.

Accessibility is Key

While we strive to make scrolling a fun experience, accessibility should remain at the forefront. Craft your smooth scroll considering keyboard-only users and those who depend on assistive technologies.

explain-codes / Javascript / Smooth scroll without the use of jQuery

Linked

Scroll to the top of the page using JavaScript?



Scrollintoview Scrolls just too far



How to scroll to an element inside a div?



Scroll to an element with jQuery



How to scroll an HTML page to a given anchor

