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. no-image

    JavaScript

    レスポンシブ対応でモバイルフレンドリーなjQueryデートピッカー・タイムピッカー「pickadat…

    pickadateはレスポンシブに対応したモバイルフレンドリーなデート…

  2. JavaScript

    シンプルなアラートを表示させることができる「smoke.js」

    smoke.jsはシンプルでカッコいいアラートを表示させることができる…

  3. gliojs

    JavaScript

    viewportから離れた時にイベントをトリガーしてくれる「gliojs」

    gliojsは、ページを閲覧している時にマウスがviewport(表示…

  4. jQuery Accordion

    JavaScript

    シンプルで実用的なアコーディオン実装「jQuery Accordion」

    とてもシンプルで操作性のよいアコーディオン「jQuery Accord…

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

    JavaScript

    jQueryのfocusとblurを使えばフォームが便利になる

    jQueryのfocusとblurを使えばフォームを便利にすることがで…

  6. Sticky Slider Navigation(Responsive)

最近の記事

  1. ワンタッチ着脱フィルターキット
  2. Soundcore Ace A1
  3. cheero USB-C PD Charger 60W
  4. DY-S01

アーカイブ

PAGE TOP