ページ内移動を以下のようなコードで一瞬で移動するのではなく、ページ内をどの方向（上下）へ移動しているのかをわかりやすくゆっくりと移動させるサイトが最近は多いように思います。
location.href = "#dest_pos";
瞬間移動ではなく、高速移動のほうが魅力的といったところでしょうか？ここでは、このようなページ内移動を行う jQuery のサンプルを掲載しています。
スポンサーリンク
そういえば、タイムマシンも瞬間移動ではなく、高速移動でした。やはり魅力的なのでしょうか。
タイムマシンも瞬間移動ではない
HTMLファイルのサンプル
前置きが長くなりましたが、ここで使用する HTML ファイルは次のものとします。
<html lang="ja">
<head>
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="test.js"></script>
<title>jQuery ページ内移動サンプル</title>
</head>
<body>
<div id="pagetop"></div>
<a id="gotoend" href="#pageend" >ページエンドへ</a>
・・・・・・・・・・・・・・・・
・・・・・・・・・・・・・・・・
・・・・・・・・・・・・・・・・
何かすごく長い文書や画像
・・・・・・・・・・・・・・・・
・・・・・・・・・・・・・・・・
・・・・・・・・・・・・・・・・
<a id="gototop" href="#pagetop" >ページトップへ</a>
<div id="pageend"></div>
</body>
</html>
ページ内移動を行う jQuery のサンプル
以下は、a タグをクリックしてページの先頭や最後尾に表示位置を変更する jQuery のサンプルスクリプトです。詳細はサンプル内のコメントを参照ください。
$(function () {
/*
* ページの先頭へ移動するaタグのクリックイベントを登録
*/
$("a[id=gototop]").click(function() {
/*
* ページ先頭に配置されたDIVタグの位置を取得
*/
var top_pos = $($(this).attr("href")).offset().top;
/*
* ページの表示位置を設定する
* htmlとbodyタグの両方の表示位置を設定っしているのはブラウザによって設定する方法が
* 異なるためである。いわゆるクロスブラウザ対応。
*/
$("html, body").animate({ scrollTop: top_pos }, 'slow','swing');
return false;
});
/*
* ページの最後尾へ移動するaタグのクリックイベントを登録
*/
$("a[id=gotoend]").click(function() {
/*
* ページ最後尾に配置されたDIVタグの位置を取得
*/
var end_pos = $($(this).attr("href")).offset().top;
/*
* ページの表示位置を設定する
*/
$("html, body").animate({ scrollTop: end_pos }, 'slow','swing');
return false;
});
});