{"componentChunkName":"component---src-templates-blog-post-js","path":"/blog/2019-10-23-smooth-scroll/","result":{"data":{"markdownRemark":{"html":"

Greetings!

\n

Do you want to give your site that cool smooth scroll when someone clicks a link?

\n\n

So, lets say you have an awesome page with different sections. You have several ways for allowing the user to get to them. Here are some examples:

\n
    \n
  1. Good ol' scrolling,
    2. \n
  2. Click on a link and make the user insta-jump to the desired section,
    3. \n
  3. Click on a link and make the user go to the desired section with a cool smooth auto-scroll.
    4. \n
\n

Here we go with the CSS way to get that smooth auto-scroll:

\n

The CSS

\n
html {\n  scroll-behavior: smooth;\n}
\n

Replacing smooth with auto gives you the default insta-jump behavior.

\n

Consider users with motion sickness

\n

Vestibular disorders arise when the parts of the inner ear and brain that process the sensory information involved with controlling balance and eye movement get damaged.

\n

Users with this disorders may suffer from motion sickness, which can make the experience of browsing the web quite unpleasent for them.

\n

As stated in MDN, you should use a CSS prefers-reduced-motion media query to disable smooth scrolling to account for users that have set their browsers to reduced motion:

\n
html {\n  scroll-behavior: smooth;\n}\n\n@media (prefers-reduced-motion: reduce) {\n    html {\n        scroll-behavior: auto;\n    }\n}
\n

Compatibility

\n

This CSS property is supported in Chrome, Firefox and Opera. As of the date of publication of this blog post, it is not supported in Safari, Edge nor Internet Explorer.

\n

Cheers, have a good one!

","frontmatter":{"title":"Smooth scroll","date":"October 23rd, 2019","icon":"☕️"},"fields":{"readingTime":{"text":"2 min read"}}}},"pageContext":{"slug":"/2019-10-23-smooth-scroll/"}},"staticQueryHashes":["143701507","588331372"]}