するーっとスクロールする「ページトップへ」


すでお気づきの方もいらっしゃるかと思うのですが。いないとちょっぴり寂しい気分になっちゃうかもしれないのですが。

「↑このページの先頭へ」というリンクを、記事下とページ下に表示するようにしました。

j121128-1.jpg

今さら感が爆発しそうですが(笑)。
その辺はよしなに。


パッと飛んじゃうリンクだと、同じページの上に移動したんだか、他のページに移動したんだか、見てる側には区別がつかないでしょ? だから、するすると上にスクロールするリンクにしてみました。

今回参考にさせていただいたのは、こちらの記事です。




今回は、いつもより作業のプロセスが多めです。
でも、一つひとつ落ち着いて考えれば難しいことはないです。コピペが多いですしね♪

では、いきましょー!


1. backtotop.js を作る

任意の場所に、テキストファイルを新規作成します。
(例:デスクトップを右クリックして、新規作成 > テキスト ドキュメントを選択。)

作成したドキュメントの本文に、下記の内容をコピペしてください。


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);
}
}


「backtotop.js」というファイル名で、名前を付けて保存します。

j121128-2.gif

デスクトップにbacktotop.jsができた例です。


2. backtotop.js をアップする

ブログ管理画面のファイルマネージャのページから、いま作った「backtotop.js」をアップしますよ。

ファイルマネージャを開き、「アップロードオプションの表示」をクリックします。

j121128-3.gif

任意のディレクトリを作って、そこにbacktotop.jsをアップします。

j121128-4.gif

「js」という名前のディレクトリは作れないように制限されています。



で、さっき作ったbacktotop.jsを選択して、アップロードボタンをクリックします。
アップロードはこれで終了。

次に、backtotop.jsのURLをコピーしておきます。

j121128-5.gif

ファイルマネージャに、backtotop.jsができてますよね?
ファイル名の部分をクリックします。

j121128-6.gif

開いたポップアップウインドウから、該当URLをコピーしておきます。
コピーするのは自分で作ったURLだよ? 間違えないでね。


3. <head>に挿入

このサイトでこのJavaScriptを動かすよーという1文を作ります。

<script language="JavaScript" src="さっきコピーしたURL"></script>


URLはフルで記述しないとエラーになるようです。



メモ帳か何かで作って、コピーしておいてね。


  デザイン > PC > HTML

と進んで、今使っているHTMLを開きます。

<head></head>の間に(例えば、</head>の前の行に)、

<script language="JavaScript" src="さっきコピーしたURL"></script>


をペーストします。

j121128-7.gif

保存ボタンをクリックします。
準備はこれで終わり。^^


4. コンテンツの挿入

いよいよリンクを挿入しますよ。

  デザイン > PC > コンテンツ

を開きます。

自由形式のコンテンツを一つ作ります。

j121128-8.gif

「自由形式」をドラッグして、記事下のスペースに持っていきます。

挿入した自由形式を開きます。

j121128-9.gif

HTML部分は、
<div style="text-align:right;"><a href="#" onclick="backToTop(); return false" title="このページの先頭へ">↑このページの先頭へ</a></div>


このままコピペでOK。
あるいは、↑を▲にしたり、文言を自分らしく変えてみてね。

altじゃなくてtitleにしてるのは、firefoxでもオンマウスで表示させるためです。

さぁ、保存ボタンをクリックして、終了!

実際にブログを開いて、するーっと上にスクロールするのを体感してください。


いかがでしたか? できましたか?
するーっと動くと気持ちいいですか?^^

それでは、また。(^_^)/


参考リンク



クリックありがとう! ←「読んだよ」の印にクリックお願い♪
 

この記事へのコメントが 0 件あります


この記事へのトラックバック