Javascript

【Javascript】ページ内をスムーズスクロールさせるSmooth Scroll behavior polyfill

December 10, 2017
Smooth Scroll behavior polyfill

Smooth Scroll behavior polyfillはページ内をスムーズスクロール機能を可能にしたライブラリ。

window.scroll or window.scrollTo

下にスクロール

window.scroll({ top: 2500, left: 0, behavior: 'smooth' });

window.scrollBy

100ピクセルスクロール

window.scrollBy({ top: 100, left: 0, behavior: 'smooth' });

window.scrollBy

100ピクセルスクロールバック

window.scrollBy({ top: -100, left: 0, behavior: 'smooth' });

element.scrollIntoView

ビュー内にスクロール

document.querySelector('.hello').scrollIntoView({ behavior: 'smooth' });

Scroll to top

トップにスクロール

window.scroll({ top: 0, left: 0, behavior: 'smooth' });

or

document.querySelector('header').scrollIntoView({ behavior: 'smooth' });

Browser Support

  1. Safari 6+
  2. iOS Safari 6+
  3. Chrome (last version)
  4. natively supported in Firefox
  5. Internet Explorer 9+
  6. Microsoft Edge
  7. Opera Next

MIT