html+CSS

ページ内リンクを動いて移動

よくある、ページ内を動いて移動するページ内リンクのサンプルです。
時々使うのですがメモしてないと思い出すのに脳内パワーをけっこう消費します><。
まとめておきます。

要な要素は以下の3つ

  • 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>