ページ内でゆっくり移動する“スムーススクロール”

よく考えたらこのサイトのトップへ戻るが押しにくいというか、ユーザヴィリティに配慮してないので、 ボタンをスクロールに追随式にして、戻るときも戻った感が出る様にぬるぬる戻るスタイルにしてみた。
というか気に入ったデザインのボタンがなかったのだけど、結局一番上のボタンに揃える形に… このサイト実験的につぎはぎで作ってるから、.jsが入り乱れてて、 おのおのが影響し合って挙動がおかしくなるし、チェックが非常にめんどくさい。
だから、添え物のメインのjQueryはしっかり作るけど、添え物のスクリプトは出来るだけ短く軽いものがいいのです。
以下が使用した最も簡単なjsです。headに読み込もうとしたけ、なんだがサイトの整形がおかしくなったから、htmlに直接読み込んだ。joomla!なんだからカスタムモジュールに書き込んでいれこんでも良かったけど…。


javascriptの本体の記述です。

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);<!--スピード変更数値-->
}
}

これを、読み込むリンクを直接htmlに貼付けた。　

<script type="text/javascript" src="<?php echo $path ?>/scripts/smoothScroll.js"></script>">

以下のリンクで繋がります。あとはトップページか途中のページがお好みで設置

<a href="#" onclick="backToTop(); return false">このページの先頭へ（又は画像）</a>　　　

こちらが、ボタン本体のCSSの記述です。一応クリックで下が見える様に半透明にしてます。

.任意の名前 {
bottom:0px;
position:fixed;<!--スクロールしても不動の絶対位置指定-->
right:50px;
}
.任意の名前 a:hover{
filter:alpha(opacity=50);<!--50％の透明度に-->
-moz-opacity: 0.5;<!--Firefox（Mozzila）向けの指定-->
opacity: 0.5;<!--SafariやOpera向けの指定-->
bottom:-2px;
position:fixed;
right:50px;
}

しかし、safariだけa:hoverが機能しない〜なぜだろう？？？と思っていたら、オンマウスは任意名称:hoverとaを省略すべきなんだな〜まあ、タッチパネルの時代だからこのタグも使われなくなるだろうが…。
とりあえずこのページは事例でスクリプトが< pre >で表示されているのでエディタ-No Editorで編集保存しなければ…
このバナーでも使った透過や切り抜きも多用するので、あんまりなにも考えずにpng画像を掘り込むもんで最近サイトの重さも気になってきた〜

サイトの表示に必要サイズファイルサイズのチェック

で、測ってみたらやっぱりランクはF。でもappleのサイトでもFクラスなんで、気にはならないのだけどね…
FTPでimagesファイルから吸い上げてたまにダイエットとしてやるフォトショップの＞ファイル＞Web用に保存で“やや高画質”を選択してやれば良い。