{"id":15646779,"url":"https://github.com/jonaskuske/smoothscroll-anchor-polyfill","last_synced_at":"2025-04-14T22:24:01.468Z","repository":{"id":46113388,"uuid":"157021143","full_name":"jonaskuske/smoothscroll-anchor-polyfill","owner":"jonaskuske","description":"⚓ Apply smooth scroll to anchor links, polyfill scroll-behavior","archived":false,"fork":false,"pushed_at":"2022-08-01T14:31:05.000Z","size":3142,"stargazers_count":43,"open_issues_count":2,"forks_count":4,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T10:21:30.983Z","etag":null,"topics":["anchor","hashchange","polyfill","scroll","scroll-behavior","smooth","smooth-scroll","smooth-scrolling","smoothscroll","smoothscroll-anchor-polyfill"],"latest_commit_sha":null,"homepage":"https://jonaskuske.github.io/smoothscroll-anchor-polyfill","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jonaskuske.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-11-10T21:01:29.000Z","updated_at":"2025-01-14T01:49:23.000Z","dependencies_parsed_at":"2022-09-26T18:31:07.784Z","dependency_job_id":null,"html_url":"https://github.com/jonaskuske/smoothscroll-anchor-polyfill","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonaskuske%2Fsmoothscroll-anchor-polyfill","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonaskuske%2Fsmoothscroll-anchor-polyfill/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonaskuske%2Fsmoothscroll-anchor-polyfill/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonaskuske%2Fsmoothscroll-anchor-polyfill/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jonaskuske","download_url":"https://codeload.github.com/jonaskuske/smoothscroll-anchor-polyfill/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248969841,"owners_count":21191336,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["anchor","hashchange","polyfill","scroll","scroll-behavior","smooth","smooth-scroll","smooth-scrolling","smoothscroll","smoothscroll-anchor-polyfill"],"created_at":"2024-10-03T12:14:45.880Z","updated_at":"2025-04-14T22:24:01.446Z","avatar_url":"https://github.com/jonaskuske.png","language":"JavaScript","readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/smoothscroll-anchor-polyfill\"\u003e\u003cimg align=\"center\" src=\"https://img.shields.io/npm/v/smoothscroll-anchor-polyfill.svg\" alt=\"NPM version\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://travis-ci.com/jonaskuske/smoothscroll-anchor-polyfill\"\u003e\u003cimg align=\"center\" src=\"https://travis-ci.com/jonaskuske/smoothscroll-anchor-polyfill.svg?branch=master\" alt=\"Build status\"\u003e\u003c/a\u003e\n  \u003ca href=\"./LICENSE\"\u003e\u003cimg align=\"center\" src=\"https://img.shields.io/npm/l/smoothscroll-anchor-polyfill.svg\" alt=\"License\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://jonaskuske.github.io/smoothscroll-anchor-polyfill\"\u003e\u003cimg align=\"center\" src=\"https://img.shields.io/badge/documentation-up--to--date-blue.svg\" alt=\"Documentation\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u0026nbsp;  \n\u0026nbsp;\n\n\u003ch1 align=\"center\"\u003esmoothscroll-anchor-polyfill\u003c/h1\u003e\n\u003cp align=\"center\"\u003e⚓ Apply smooth scroll to anchor links to polyfill the CSS property \u003ccode\u003escroll-behavior\u003c/code\u003e\u003c/p\u003e\n\n\u0026nbsp;  \n\u0026nbsp;  \n\u0026nbsp;\n\n## Features\n\n- ✔ Smooth scroll to target when clicking an anchor\n- ✔ Smooth scroll to target on hashchange (◀/▶ buttons)\n- ✔ Updates URL with #fragment\n- ✔ Handles focus for improved accessibility\n- ✔ Doesn't break server-side rendering\n- ✔ 1.3KB gzipped\n\n⚠ Requires smooth scroll for `window.scroll()` and `Element.scrollIntoView()` (e.g. [smoothscroll-polyfill](http://iamdustan.com/smoothscroll/)) to work!\n\n\u0026nbsp;\n\n## Browser support\n\n| [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\" alt=\"IE / Edge\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eIE / Edge | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eFirefox | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eChrome | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eSafari | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png\" alt=\"iOS Safari\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eiOS Safari | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png\" alt=\"Opera\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003c/br\u003eOpera |\n| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| IE9+, Edge                                                                                                                                                                                                      | native                                                                                                                                                                                                            | native\\*                                                                                                                                                                                                      | last 2 versions                                                                                                                                                                                               | last 2 versions                                                                                                                                                                                                               | native\\*                                                                                                                                                                                                  |\n\n\u003e \\* hashchange navigation triggered by forwards/backwards buttons isn't smooth despite native support. [Learn more](https://jonaskuske.github.io/smoothscroll-anchor-polyfill#native-inconsistencies)\n\n\u0026nbsp;\n\n## Usage\n\n### 1. Set `scroll-behavior: smooth` in CSS\n\n\u003e ⚠ Has to be set global (on `html`), [check the docs for limitations](https://jonaskuske.github.io/smoothscroll-anchor-polyfill#global-only)\n\n\u0026nbsp;\n\nBecause CSS properties unknown to a browser can't efficiently be parsed from JavaScript, just specyfing the normal `scroll-behavior` property is not enough unfortunately.  \nYou need to add an additional CSS variable so the polyfill can read it:\n\n```css\nhtml {\n  --scroll-behavior: smooth;\n  scroll-behavior: smooth;\n}\n```\n\nYou can also use media queries, toggle classes etc. to control the smooth scroll. The following only enables smooth scroll on Desktop devices, for example:\n\n```css\nhtml {\n  --scroll-behavior: auto;\n  scroll-behavior: auto;\n}\n\n@media screen and (min-width: 1150px) {\n  html {\n    --scroll-behavior: smooth;\n    scroll-behavior: smooth;\n  }\n}\n```\n\n\u0026nbsp;\n\n\u003e 💡 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.  \n\u003e 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™\n\n\u0026nbsp;\n\n#### Need to support Internet Explorer?\n\nLegacy browsers like Internet Explorer do not support CSS variables, so you need another way to specify `scroll-behavior`. There are two options:\n\n##### Using the inline `style` attribute\n\n```html\n\u003chtml style=\"scroll-behavior: smooth;\"\u003e\n  ...\n\u003c/html\u003e\n```\n\n##### Using `font-family`\n\nAlternatively, 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.\n\n```html\n\u003cstyle\u003e\n  html {\n    scroll-behavior: auto;\n    font-family: 'scroll-behavior: auto;', 'Roboto', sans-serif;\n  }\n\u003c/style\u003e\n```\n\n\u0026nbsp;\n\n### 2. Install the polyfill\n\nBecause 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**.\n\n\u003e [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)\n\n#### 2a. From a CDN\n\n```html\n\u003cscript src=\"https://unpkg.com/smoothscroll-anchor-polyfill\"\u003e\u003c/script\u003e\n```\n\n#### 2b. From npm\n\n```bash\nnpm install smoothscroll-anchor-polyfill\n```\n\nthen\n\n```js\nimport 'smoothscroll-anchor-polyfill'\n```\n\n\u0026nbsp;\n\n## Full Documentation \u0026 Demo\n\nThe full documentation with advanced installation instructions, limitations, features like enabling and disabling the smooth scrolling and more can be found at\n[**jonaskuske.github.io/smoothscroll-anchor-polyfill**](https://jonaskuske.github.io/smoothscroll-anchor-polyfill).  \nThe documentation site itself is built as a smooth scrolling one-page design, utilizing this polyfill.\n\n\u0026nbsp;  \n\u0026nbsp;\n\n---\n\n**PRs welcome!**\n\n\u0026nbsp;\n\n© 2021, Jonas Kuske\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonaskuske%2Fsmoothscroll-anchor-polyfill","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjonaskuske%2Fsmoothscroll-anchor-polyfill","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonaskuske%2Fsmoothscroll-anchor-polyfill/lists"}