スムーススクロールでページトップへ戻る

スムーススクロールというものをご存知でしょうか?
よくある「トップへ戻る」「ページTOPへ」などのリンクをクリックすると、ページがスクロールするあれです。自分が試したものを書いておきます。

df Javascript Smooth Scrollデモページ
簡単に導入できますが、RapidWeaverでは
<a name=”top”> といったアンカータグに勝手にIDセレクタが降られ、<a name="top" id="top"></a> のように書き出されてしまいます。
こうなると、残念ながらこのスクリプトは使用できませんでした。非常に惜しいです。RapidWeaver以外で導入する場合は
youmosというサイトが参考になります。


A (slightly) better technique for "Back to Top" links.
今回利用したのはコチラのスクリプト。動きがキビキビしている割にはなめらかで個人的にはベストでした。導入方法は以下の通り。(
動作サンプルページ

1.JSファイルを用意

スムース スクロールをさせるためのJavaScriptが書かれたファイルを用意します。以下のコードをテキストエディタなどにコピー&ペーストし適当に保存して下さい。ファイル名はなんでも結構です。拡張子は「.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); }}


2.HeaderにJSファイルへのパスを挿入

導入したいページのヘッダに以下のコードを挿入します。

ページインスペクタを開いてヘッダタブの所に上記のコードを挿入します。
*

全てのページに導入したい場合は、テーマのパッケージを開いて「Theme.plist」と「index.html」を直接編集します。
まず、Theme.plist を開いて、「RWCopyfiles」の項目の中に、1で作成したJSファイル名で新たな項目を作ります。ファイルの置き場所は Contentsフォルダの中でいいでしょう。
*名前は適当で何でもOKです。

次に、index.html を編集します。以下のコードを <head></head> 内なら何処でも構いませんので挿入してください。ファイル名は自分で決めたものに変更して下さい。


3.任意の場所にトップへ戻るコードを配置

最後にページトップへ戻るためのコードを挿入します。

Topへ戻る

以上で終了です。「Topへ戻る」の所は自由に書き換えて下さい。df Javascript Smooth Scroll のように、アンカータグを挿入する必要はありませんので導入しやすいと思います。

外部ファイルを作るのが面倒な場合は、「1」のコードをページインスペクタの JavaScriptタブの中に直接書いて、「3」を実行してください。すごく簡単に導入できると思います。

blog comments powered by Disqus