基本中の基本の話になってしまいますが、順序立てて解説したほうがわかりやすいので一応しますと、ウェブページ上ではリンクはa要素(タグ)で設置できます。
そのリンクをクリックした際のリンク先はhref属性に記述しておきます。
具体的なコード例としては以下のような感じです。
<a href="リンク先のURL">リンク文字</a>
上記の「リンク先のURL」をそのページ自身にすることも可能ですが、その場合はページの最上部が表示されることになります。
もしページ内の特定の箇所にリンクさせたい場合は、その箇所のHTMLには以下のようなid属性を付けておき、
<div id="任意のid名"></div>
その「任意のid名」に#(半角シャープ)を付けた文字列をhref属性に記述します。
具体例としては以下のようなリンク(aタグ)を設置します。
<a href="#任意のid名">リンク文字</a>
しかし上記のやり方だけの場合は以下のような欠点があります。
具体的なサンプルページを用意しましたので、デメリットや挙動をご確認ください。
通常のページ内リンクのサンプル
ずいぶん前置きが長くなってしまいましたが、ページ内リンクにスクロールのアニメーションを簡単に付加できるスクリプトを作りました。
スクリプト名称は「リンクスクロールスクリプト」としておきます。
リンクスクロールスクリプトのサンプル
これは前掲の「通常のページ内リンクのサンプル」に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フォルダが同梱されていますが、これらはサンプルページ(初期状態のindex.html)での表示のためにあるだけで、このプログラムの動作には一切関係していません。
このプログラムを既存ページに組み込む際などには不要になるので、フォルダごと削除してOKです。
最低限必要なファイルはjQuery本体とlink-scroll.jsだけです。
本プログラムの使用においていかなる損害が発生したとしても、当方は責任を負いません。
了承していただける方のみご利用ください。
不具合などありましたら、サポートBBSからご連絡ください。
アップデートの際に修正する可能性があります。
無料のものですから、基本的にはサポートはありません。
が、初期状態での設置でエラーが出る場合は、サポートBBSにて無償対応いたしております。
初期状態とは、すべてのファイルを一切編集していない状態のことを指します。
それ以外のファイルが編集されていたり、既存サイトに組み込んだ場合などのお問い合わせは有償となりますので、ご了承ください。
しかし例外として、当サイト上で解説されているカスタマイズ方法だけを実践して正常動作しない場合は、無償サポート対象内になります。
その理由は、そのような使い方を想定してプログラムが作られているからです。
ご希望のカスタマイズがありましたら、お問い合わせページからご依頼ください。
ページを下に少しスクロールされると「ページ最上部に戻る」が出現し、そのボタンをクリックするとページ最上部にアニメーションで戻るスクリプトを作りました。サイトを制作する度に毎回同じコードを書いたりコピペするのも面倒なため、簡単に組み込めるようにできています。
マウスオーバーさせた時に画像を切り替えるのはCSSの:hover疑似要素を使用するのが基本となりますが、フェード演出で切り替えたい場合もありますね。そのようなフェード演出を簡単に実装できるスクリプトを作りました。無料でダウンロードでき、既存サイトに簡単に実装できます。
ドロップダウン式(縦方向の折り畳み式)のスマホ用メニューを簡単に設置できるスクリプトを無料ダウンロードできます。CSSが理解できる人なら自由にデザインを変更したり、多重階層にすることも可能でしょう。
画像リンクをクリックするとズーム演出で大きな画像をオーバーレイで表示するスクリプトを作りました。iPhoneやiPadなどでアプリを開いた時のような演出とお考えください。無料でダウンロードでき、既存サイトに組み込みやすいようにできています。
タブをクリックして表示エリアを切り替えるスクリプトを作りました。既存のページに組み込みやすくできています。特にスマホの場合は画面上に表示できるページ領域が狭いため、このスクリプトを使用することで簡単に各エリアをタブ切り替え式にすることができます。
この「アップデート情報」欄はコンテンツ・メーカーを使用して更新・表示しています。
ファーストステップでは人や世の中の役に立つプログラムを作っています。
ぜひ色々使ってみて、改善点や要望などがあればお申し出ください。
