よくある、ページ内を動いて移動するページ内リンクのサンプルです。
時々使うのですがメモしてないと思い出すのに脳内パワーをけっこう消費します＞＜。
まとめておきます。
要な要素は以下の３つ
- jqueryの呼び出し
- javascriptの記載
- ページ内リンクの設定
jqueryの呼び出し。
head内に以下を記載するだけ。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
javascriptの記載
1.HEAD内に記述する
$(function(){
// #で始まるアンカーをクリックした場合に処理
$('a[href^=#]').click(function() {
// スクロールの速度
var speed = 400; // ミリ秒
// アンカーの値取得
var href= $(this).attr("href");
// 移動先を取得
var target = $(href == "#" || href == "" ? 'html' : href);
// 移動先を数値で取得
var position = target.offset().top;
// スムーススクロール
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
</script>
2.外部呼び出しにする
ページ数の多いサイト等は全ページのhead内に記載するのは面倒ですし、ページを増やした時や動くスピードを変えるなどした時に全ページを変更する必要があり非常に面倒です。そういうときのためにjavascriptを外部呼び出しにしてしまうと便利至極です。
外部呼び出しのJAVASCRIPTを記載
ページには以下の外部呼び出し用のソースのみを記載します。
ページ内移動を実装させたいページ全てに埋め込む必要があります。
※「/common/js/default.js」の部分はあなたのサイトに合わせて修正してください。
上記のサンプルの場合は、サイト内のTOPディレクトリ/commn/内の/jsフォルダにdefault.jsというファイルを作って以下の呼び出し用javascriptのコードを記載しています。
<script type="text/javascript" src="/common/js/default.js"></script>
呼び出したファイル内の記載
呼び出し先のJSファイルです、こちらには、HEAD内に記載したときのjabvascript宣言（<script type=”text/javascript”>と最後の</script>）は要りません、と言うかあるとエラーになります。
$(function(){
// #で始まるアンカーをクリックした場合に処理
$('a[href^=#]').click(function() {
// スクロールの速度
var speed = 400; // ミリ秒
// アンカーの値取得
var href= $(this).attr("href");
// 移動先を取得
var target = $(href == "#" || href == "" ? 'html' : href);
// 移動先を数値で取得
var position = target.offset().top;
// スムーススクロール
$('body,html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});
ページ内リンクの設定
最後にページ内に移動用のリンクを貼ります。
必要な要素はアンカーとリンクです。
<div id="pagetop"></div>
TOPです。<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
▼移動元のリンク
<a href="#pagetop">▲ページTOPへ戻る</a>
