ページ内リンクをスクロール移動させるスクリプトの無料ダウンロード

公開日

2018年10月17日

最終更新日

2021年10月25日

著者

Motohiro Tani

基本中の基本の話になってしまいますが、順序立てて解説したほうがわかりやすいので一応しますと、ウェブページ上ではリンクはa要素(タグ)で設置できます。
そのリンクをクリックした際のリンク先はhref属性に記述しておきます。
具体的なコード例としては以下のような感じです。

<a href="リンク先のURL">リンク文字</a>

上記の「リンク先のURL」をそのページ自身にすることも可能ですが、その場合はページの最上部が表示されることになります。
もしページ内の特定の箇所にリンクさせたい場合は、その箇所のHTMLには以下のようなid属性を付けておき、

<div id="任意のid名"></div>

その「任意のid名」に#(半角シャープ)を付けた文字列をhref属性に記述します。
具体例としては以下のようなリンク(aタグ)を設置します。

<a href="#任意のid名">リンク文字</a>

しかし上記のやり方だけの場合は以下のような欠点があります。

1. URLの末尾に上記の「#任意のid名」が付いてしまう。
2. スクロールのアニメーションなどもなく一瞬でリンク先の箇所が表示されるため、ページ内のどの部分に移動したのかがわかりにくい。

具体的なサンプルページを用意しましたので、デメリットや挙動をご確認ください。
通常のページ内リンクのサンプル

このスクリプトの解説

ずいぶん前置きが長くなってしまいましたが、ページ内リンクにスクロールのアニメーションを簡単に付加できるスクリプトを作りました。
スクリプト名称は「リンクスクロールスクリプト」としておきます。

• HTMLページに組み込み可能。
• リンクとそれに対するリンク先エリアはいくつでも追加可能。
• 設定用のファイルなし。サーバにアップロードするだけで動きます。
• 既存ページに組み込むのも超簡単。
• 最低限必要なファイルはjQuery本体とlink-scroll.jsだけ。

リンクスクロールスクリプトのサンプルとダウンロード

リンクスクロールスクリプトのサンプル
これは前掲の「通常のページ内リンクのサンプル」にjQuery本体と1つのJSファイル(link-scroll.js)を追加で読み込ませただけです。それ以外のHTMLやCSSはすべて同じです。

リンクスクロールスクリプトのダウンロード
最新バージョンが無料でダウンロードできます。

設置方法の解説

まず、動作確認のために以下の作業から順番に確認していくと間違いがないでしょう。

1、リンクスクロールスクリプトをダウンロードし、展開する。

2、フォルダごとサーバにアップロードする。

3、ブラウザでindex.htmlにアクセスし、スクロール動作を確認する。

既存サイトへの組み込み方法

以下の作業は同梱のindex.htmlのソースからコピーしていくと間違いがないでしょう。

1、組み込みたいページ内にリンクを設置する。
このa要素はlink-scrollというクラス名を付けてください。

<a href="#任意のid名" class="link-scroll">リンク文字</a>

2、リンク先の要素(タグ)に上記手順1で記述したid名を付けてください。
リンク先の要素(タグ)はdivである必要はありません。pでもulでもimgでもspanでもなんでもOKです。
ただ、id属性は1つのページ内で同一名のものが存在しないようにしてください。
id属性は複数NG、class属性は複数OK。それがHTMLの仕様です。

<div id="任意のid名"></div>

3、jQuery本体とlink-scroll.jsを読み込む。
以下のコードはbody要素の最下部あたりに記述すると良いでしょう。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="js/link-scroll.js"></script>

以上です。
リンクをクリックしてスクロールのアニメーションが起きるかを確認してみましょう。
body要素に対する指定がありますが、これは既存サイトに組み込む場合は不要だと思いますので削除してOKです。

cssフォルダとimageフォルダについて

初期状態ではCSSフォルダとimageフォルダが同梱されていますが、これらはサンプルページ(初期状態のindex.html)での表示のためにあるだけで、このプログラムの動作には一切関係していません。

このプログラムを既存ページに組み込む際などには不要になるので、フォルダごと削除してOKです。
最低限必要なファイルはjQuery本体とlink-scroll.jsだけです。

注意点

サポートに関して

カスタマイズに関して

ご希望のカスタマイズがありましたら、お問い合わせページからご依頼ください。

アップデート履歴

2018/10/17　バージョン1.0

• 公開。