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. CSS3 Menu Slider
  2. Tag-it

    JavaScript

    サジェスト機能を搭載したタグ編集ウィジェット「Tag-it」

    Tag-itはサジェスト機能を搭載したjQuery UIプラグインによ…

  3. simplePagination.js
  4. no-image

    JavaScript

    レスポンシブでマルチレベルに対応したナビゲーション「K-Responsive-Menu」

    K-Responsive-Menuは、レスポンシブでマルチレベルに対応…

  5. Jquery-Slider

    JavaScript

    水平の画像タイムラインを実装できる「Jquery-Slider」

    Jquery-Sliderは水平の画像タイムラインを実装できるのが特徴…

  6. Image Lightbox

最近の記事

  1. WiMAX
  2. 甘柿
  3. 冬用のふとん
PAGE TOP