「ページの先頭に戻る」をスムーズに移動させるJs

Back to Top
ウェブサイトに下方にある「ページの先頭に戻る」をジャバスクリプト(js)を使ってスムーズに移動する方法を紹介します。クリック時に移動先を追えるので迷うことがありません。

アフィリエイトするなら!

ページの先頭に戻る JavaScript Back to Top

【ページの先頭に戻る】をクリックした時にリンク先までスムーズに移動するJavaScript Back to Topの紹介ページです。

Back to Topを使う

通常「↑ページの先頭へ戻る」をクリックすると一瞬で先頭へ移動します。

しかし、スクロールを何回かしなくてはいけない長いサイトの場合、いきなり移動すると戸惑う時があります。

先頭まで滑らかに移動してくれる

Back to Topは、「ページの先頭に戻る」を滑らかに移動させるJavaScriptです。参考記事は【A (slightly) better technique for "Back to Top" links.】です。

Back to Top設置

1.下記をページ内に書き込むか、外部ファイルにする
function backToTop() {
var x1 = x2 = x3 = 0;
var y1 = y2 = y3 = 0;
if (document.documentElement) {
x1 = document.documentElement.scrollLeft || 0;
y1 = document.documentElement.scrollTop || 0;
}
if (document.body) {
x2 = document.body.scrollLeft || 0;
y2 = document.body.scrollTop || 0;
}
x3 = window.scrollX || 0;
y3 = window.scrollY || 0;
var x = Math.max(x1, Math.max(x2, x3));
var y = Math.max(y1, Math.max(y2, y3));
window.scrollTo(Math.floor(x / 2), Math.floor(y / 2));
if (x > 0 || y > 0) {
window.setTimeout("backToTop()", 25);
}
}
2.下記を「ページの先頭に戻る」に追加する
<a href="#" onclick="backToTop(); return false">ページの先頭に戻る</a>

当サイトでも設置しているので試しに押してみてください。

次のページ
» Google adsense(グーグルアドセンス)最適化
前のページ
» SEO対策ドットコム & SEO対策キーワード辞典
カテゴリ
» アフィリエイトップWebログ
トップページ
» アフィリエイトップ

▲このページの先頭へ

IIMヒューマン・ソリューション株式会社

アフィリエイトブログ記事一覧
無料ブログ一覧
オススメASP一覧
SEO HTML無料ツール集
アフィリエイト情報サイト:アフィリエイトップ
Copyright(C) 2009 Sitefix All Rights Reserved http://affiliatop.sitefix.jp/