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. Nex

    JavaScript

    ダイナミックで美しいフルスクリーンのjQueryスライダーを実装できる「Nex」

    Nexはダイナミックで様々なアニメーションエフェクトが用意されたフルス…

  2. Chameleon.js
  3. JavaScript

    blur効果で要素を簡単にぼかしてくれるjQueryプラグイン「Foggy」

    FoggyというjQueryプラグインを使ってみました。これを使えば指…

  4. simple-calendar

    JavaScript

    イベント設定もできるシンプルなカレンダー実装「simple-calendar」

    simple-calendarは、イベント設定も可能なシンプルなカレン…

  5. no-image

    JavaScript

    ダイナミックな自動スライドショーを実装できる「CSS + jQuery Gallery」

    CSS + jQuery Galleryはダイナミックでかっこいい自動…

  6. Captall

    JavaScript

    画像やDOM要素の上にキャプションを表示することができるjQueryプラグイン「Captall」

    CaptallというjQueryプラグインを使えば、画像や設定したDO…

最近の記事

  1. Apple WatchでのMacロック解除を無効
  2. オータムスイートポテトフラペチーノ
  3. 紅葉
  4. ナノケア EH-NA0E
  5. スターバックス コロンビア サンタンデール

アーカイブ

PAGE TOP