⚓ Apply smooth scroll to anchor links to polyfill the CSS property scroll-behavior
](http://godban.github.io/browsers-support-badges/)IE / Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari | [
](http://godban.github.io/browsers-support-badges/)iOS Safari | [
](http://godban.github.io/browsers-support-badges/)Opera |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| IE9+, Edge | native | native\* | last 2 versions | last 2 versions | native\* |
> \* hashchange navigation triggered by forwards/backwards buttons isn't smooth despite native support. [Learn more](https://jonaskuske.github.io/smoothscroll-anchor-polyfill#native-inconsistencies)
## Usage
### 1. Set `scroll-behavior: smooth` in CSS
> ⚠ Has to be set global (on `html`), [check the docs for limitations](https://jonaskuske.github.io/smoothscroll-anchor-polyfill#global-only)
Because CSS properties unknown to a browser can't efficiently be parsed from JavaScript, just specyfing the normal `scroll-behavior` property is not enough unfortunately.
You need to add an additional CSS variable so the polyfill can read it:
```css
html {
--scroll-behavior: smooth;
scroll-behavior: smooth;
}
```
You can also use media queries, toggle classes etc. to control the smooth scroll. The following only enables smooth scroll on Desktop devices, for example:
```css
html {
--scroll-behavior: auto;
scroll-behavior: auto;
}
@media screen and (min-width: 1150px) {
html {
--scroll-behavior: smooth;
scroll-behavior: smooth;
}
}
```
> 💡 This process can be automated using a [PostCSS plugin](https://github.com/jonaskuske/postcss-smoothscroll-anchor-polyfill), so you can write regular CSS and it'll be transformed to work with the polyfill automatically.
> The plugin will also read your [browserslist](https://github.com/browserslist/browserslist) and choose the right transformation depending on if all your browsers support CSS variables or not. It just works™
#### Need to support Internet Explorer?
Legacy browsers like Internet Explorer do not support CSS variables, so you need another way to specify `scroll-behavior`. There are two options:
##### Using the inline `style` attribute
```html
...
```
##### Using `font-family`
Alternatively, you can specify the property as the name of a custom font family. Your actual fonts will still work the way they should (plus, you can simply declare actual fonts on `body`). As with CSS variables (and unlike inline styles), this allows you to use normal CSS features like media queries.
```html
```
### 2. Install the polyfill
Because this polyfill only wires up anchor links to use the browser's native `window.scroll()` and `element.scrollIntoView()` methods, you'll need to load a polyfill providing smooth scroll to these methods **in addition to the steps outlined below**.
> [smoothscroll-polyfill](http://iamdustan.com/smoothscroll/) works, but you can just as well use another one or write your own implementation. [Learn More](https://jonaskuske.github.io/smoothscroll-anchor-polyfill#usage)
#### 2a. From a CDN
```html
```
#### 2b. From npm
```bash
npm install smoothscroll-anchor-polyfill
```
then
```js
import 'smoothscroll-anchor-polyfill'
```
## Full Documentation & Demo
The full documentation with advanced installation instructions, limitations, features like enabling and disabling the smooth scrolling and more can be found at
[**jonaskuske.github.io/smoothscroll-anchor-polyfill**](https://jonaskuske.github.io/smoothscroll-anchor-polyfill).
The documentation site itself is built as a smooth scrolling one-page design, utilizing this polyfill.
---
**PRs welcome!**
© 2021, Jonas Kuske