cri.dev
about posts rss

scroll-behaviour

Published on
Tagged with javascript58 css2 html2

Scrolling/Jumping to a specific part of a webpage can be achieved in various ways, and with different bevaviours.

E.g.

  • JavaScript
  • CSS
  • HTML

With JavaScript

You can use the CSSOM scrolling APIs

window.scrollTo(x-coord, y-coord)
window.scrollTo(options)

E.g.

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

With CSS

Additionally, you can use the CSS property scroll-behaviour set to smooth (different from auto).

It overrides the scroll behaviour via JavaScript and it can be a real nightmare to debug and to understand.

The scroll-behavior CSS property sets the behavior for a scrolling box when scrolling is triggered by the navigation or CSSOM scrolling APIs

With HTML

“Old-school” scrolling can be achieved with HTML anchors:

  • a <a> element with a hash
  • an HTML element with the corresponding id attribute

Here, have a slice of pizza 🍕