Smooth Scroll behavior polyfill

JavaScript

ページ内をスムーズにスクロールできる「Smooth Scroll behavior polyfill」

Smooth Scroll behavior polyfillは、ページ内をスムーズにスクロールさせる機能を実装することができます。Window インターフェイスの拡張機能として導入されているとのこと。スクロールする位置を細かく指定することも可能です。

Smooth Scroll behavior polyfill

デモ

デモページでは、いくつかのページ内リンクが設置されていて、各リンクのボタンをクリックするとそれに応じた位置まで自動でスクロールされます。

画面の一番下や一番上までスクロールできるのはもちろん、100pxだけ下(もしくは上)にスクロールするといったことも可能です。スクロールさせる位置を細かく指定できるので、カスタマイズしたい人にもうれしいですね。

使い方に関してもすごくシンプルでわかりやすく実装できます。

スクロール動作もサクサクとスムーズに移動するので、ストレスなく目的の位置まで辿り着けます。縦長のサイトで、ページ内リンクをたくさん貼っている場合には積極的に活用したくなる機能ですね。

サポートされているブラウザ(テスト済み)は、Safari 6+、iOS Safari 6+、Chrome(last version)、natively supported in Firefox、Internet Explorer 9+、Microsoft Edge、Opera Nextです。

というわけで、ページ内をスムーズなスクロールで移動させることができる「Smooth Scroll behavior polyfill」のご紹介でした。

Smooth Scroll behavior polyfill

関連記事

  1. 10のjQueryスニペット

    JavaScript

    Webデザイナーが知っておくべき10のjQueryスニペット

    すべてのWebデザイナーが知っておくべき10のjQueryスニペットが…

  2. Sticker.js

    JavaScript

    ペラッとめくるようなエフェクトが素敵なJSライブラリ「Sticker.js」

    画像や要素をペラッとめくるようなエフェクトを実装できるJSライブラリ「…

  3. Simple Image Panner and Zoomer
  4. Ion Zoom

    JavaScript

    シンプルで美しいLightbox系のjQueryプラグイン「Ion Zoom」

    シンプルで美しいLightbox系のjQueryプラグイン「Ion Z…

  5. Linear Slider

    JavaScript

    シンプルな機能で使いやすいjQueryによる水平スライダー「Linear Slider」

    Linear Sliderはシンプルな機能性による水平スライダーを実装…

  6. Jquery Tab Plugin

    JavaScript

    シンプルで見やすいタブパネルを実装できる「Jquery Tab Plugin」

    Jquery Tab Pluginはシンプルで見やすく、そして操作しや…

最近の記事

  1. iPhone 11 ProとApple Watch Hermès
  2. cheero Energy Plus mini Wireless 4400mAh
  3. cheero 2 port PD Charger
  4. 台座と紅葉
  5. ニルヴァーナ バターチキンカレー

アーカイブ

PAGE TOP