Smooth Anchor Scrolling

JavaScript

ページ内リンクをスクロールできる「Smooth Anchor Scrolling」

ページ内リンクをスムーズにスクロールできる「Smooth Anchor Scrolling」をご紹介します。ページ内に設置したリンクをクリックすると、その場所まで自動でスクロールする機能を実装できるチュートリアルです。

Smooth Anchor Scrolling

Smooth Anchor Scrolling

デモには、S1.Info、Section 2、Section 3、Section 4というナビゲーションメニューが設置されており、各項目をクリックすると、それに応じたポイントまでスクロールされます。

ナビゲーションメニューは上部に固定されているので、どこいても手軽に好きなポイントへスクロールできます。

ストレスなくページ内をあちこち行き来したい人にはとてもうれしい機能になるはずです。

スクロールもスムーズに動作するので、快適にコンテンツを楽しむことができます。縦長のページでたくさんの情報量を載せているときなどに活用してみたいですね。

対応しているブラウザは、Chrome、Safari、Opera、Firefox、IE10+、それから、iOS6やiOS7などでもテストされているとのこと。

というわけで、スムーズにページ内リンクをスクロール移動できる「Smooth Anchor Scrolling」のご紹介でした。

関連記事

  1. humane.js

    JavaScript

    シンプルでモダンなさりげない通知システムを実装できる「humane.js」

    humane.jsはフレームワークなどに依存しないシンプルでモダンな通…

  2. scrollUp

    JavaScript

    スクロールしていくと先頭に戻るボタンを表示してくれるjQueryプラグイン「scrollUp」

    下へスクロールしていくと、先頭に戻るボタンを表示してくれるjQuery…

  3. iziModal

    JavaScript

    エレガント・レスポンシブ・フレキシブルでそのうえ軽量なモーダルウィンドウ「iziModal」

    iziModalはエレガント・レスポンシブ・フレキシブルなモーダルウィ…

  4. jQuery-LightBox

    JavaScript

    軽量でモバイルフレンドリーなLightbox実装「jQuery-LightBox」

    jQuery-LightBoxは、軽量でレスポンシブにも対応したモバイ…

  5. Responsive jQuery Pop Up Gallery
  6. jquery countDownTimer

最近の記事

  1. Dyson Pure Cool Me
  2. ルック セレクション
  3. シルキーウインドモバイル
  4. アリエール パワージェルボール3D

アーカイブ

PAGE TOP