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

jQuery Elastic GridGoogle画像検索っぽいイメージギャラリーを実装できる「jQuery Elastic Grid」前のページ

軽量なガントチャートを実装できるjQueryプラグイン「jQuery gantt」次のページjQuery gantt

関連記事

  1. no-image
  2. BetterToggle

    JavaScript

    要素を拡大しながら表示させたり非表示にしたりできるjQueryプラグイン「BetterToggle」…

    面白いjQueryプラグインがあったのでご紹介します。指定した要素を拡…

  3. Relocator
  4. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQuery(JavaScript)で指定した要素の子要素数や最大文字数を配列内から取得する

    jQueryで指定した要素の子要素の数やその文字数、文字なんかを配列に…

  5. JavaScript

    レスポンシブに対応して画像をポップアップ表示してくれる素敵なjQueryプラグイン「fancyBox…

    とても有名なプラグインですが、今まで使ってみたことがなかったので試して…

  6. no-image

    JavaScript

    多彩なパラメーターでモバイルフレンドリーなjQuery Lightboxプラグイン「frydBox」…

    frydBoxは、多彩なパラメーターでカスタマイズ性の高いモバイルフレ…

最近の記事

  1. EOS R5
  2. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ
  3. ペットボトルホルスター

アーカイブ

PAGE TOP