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

    JavaScript

    画面上部に美しいプログレスバーを表示できる「topbar」

    topbarは、ページ読み込み時に画面上部に美しいプログレスバーを表示…

  2. No Vacancy

    JavaScript

    ネオンサインのようなエフェクトを実装できるjQueryプラグイン「No Vacancy」

    テキストにネオンサインのようなエフェクトを実装することができるjQue…

  3. FakeLoader.js

    JavaScript

    フルスクリーンでカッコいいローディングアニメーション・FakeLoader.js

    FakeLoader.jsはフルスクリーンでカッコいいローディングアニ…

  4. no-image

    JavaScript

    高性能なイメージビューアを実装できる「PhotoViewer」

    PhotoViewerは高性能なイメージビューアを実装できるJSプラグ…

  5. Glide.js
  6. JavaScript

    JavaScriptでセレクトボックスから項目を選択したらリンク先にジャンプさせるやり方

    ちょっとした備忘録です。よく見るセレクトボックスから各項目を選択するだ…

最近の記事

  1. レトロスペクティブ V2.0
  2. YAECA ワイドテーパードデニム 10-13WW
  3. ADR-3ML39シリーズ
  4. キュレル モイスチャーバーム

アーカイブ

PAGE TOP