ページ内リンクを使ってもブラウザにページ履歴を残さない方法

Read More

まずページ内リンクとページ履歴について簡単な説明。


ページ内リンクが設置してあるページをAページとし
押したあとに表示されたページをBページとしよう。


通常、Aページからページ内リンクを押すと、
同一ページの表示にも関わらずブラウザには別ページとしてBページが認識される。

だからこの時ブラウザの履歴からバックするとAページのトップが再び表示される。

まあBページの方のURLには"#"がついててAページのURLと違うから、BページをAページとは別ものとして扱うのはブラウザとしては当たり前の挙動。


しかしユーザビリティを高めるために仕掛けたページ内リンクが、押すたびに全て履歴として残ってしまっては、ブラウザのバックの時に結構な障害となる。

ページ内リンクを複数回押下した後に戻りたいときははっきり言ってうざい。


history.goとかhistory.lengthを使わずに、
何かしら解決方法はないかと思っていたら海外のサイトで良いjsを見つけた。


Dezinerfolio
http://www.dezinerfolio.com/2007/08/08/df-javascript-smooth-scroll


ページ中部の辺りに「dfsooth Scroll」というリンクがあるのでここからファイルをDLできる。



DLしたzipを解凍するとsmooth.pack.jsとsmooth-src-comments.jsという2つのjsがあるので、
好きな方のjsファイルをhead要素で読み込ませるだけでよい。


ちなみに自分の環境ではsmooth.pack.jsというのは文字化けした状態になっていたが、読み込ませると動作には問題なかった。
圧縮って最近はこういうもん?


まあ後々のカスタマイズを考えると可読できるsmooth-src-comments.jsの方がよい気がする。


このjsファイルの読み込みが終わればあとは通常通りのページ内リンクを設置すればよい。

■設置例
<html>
<head>
<script src="smooth-src-comments.js" type="text/javascript"></script>
</head>
<body>
<a name="top" id="top"></a>
{何かしら任意のコンテンツ}
<a href="#top">ページトップへ</a>
</body>
</html>



通常ページ内リンクを押すとアドレスバーのURLは
http://example.com/index.html

から
http://example.com/index.html#top

という"#"付きのアドレスに変更されるのだが、
このjsを使うとアドレスは変わらない。


どうやらリンクの処理を途中でキャンセルしているようだ。


デフォルトではスムーススクロール機能が付いているが、
必要ない場合は12行目あたりのsppedを0に変更すればスムーススクロール機能は切れる。
// speed:10,
speed:0,

まあわざわざ切る必要もないと思うが。


なおこのjsファイルはとてもシンプルに書かれているのでカスタマイズも容易。

例えばa要素じゃなくてdiv要素やbody要素のidに対応させることも可能だし、
idだけじゃなくてこれをclassに変更させることも簡単。

時と場合によるが、a要素の数があまりに多い時にはbody要素に変更するのも一つの手だろう。



あと、このjsファイルを見ていて気がついたが、
スムーススクロール機能が無くて、かつページ履歴に残さないという動作だけ欲しい場合、
自前で書いたら3~4行でいけそうね。

自分はスムーススクロールはあった方がいいのでわざわざやらんけど。



あとこのjsファイル、jQueryを使いません。
jQueryと併用した時の相性はどうなんでしょうね。


おいおい試していくとしよう。



Comments(5)

1  115ちゃん  2012/04/10 (火) 12:24 ID:XXXXXXXXX
さっそく試してみました。
jQueryを使っているページだからか、うまく適用されない。。。
パスが間違っているとかいつもの勘違いはなしですよwww

も少しやってみます。
これがあれば本当いいですよね~。
いつもいい情報ありがとうございます!

2  シラサヤ  2012/04/11 (水) 00:55 ID:XXXXXXXXX
あら、コード見た感じでは大丈夫そうだったんだけどjQueryと併用不可だったかー

あ、他の(今まで使ってた)スムーススクールjsはもちろん外してるよね?

3  115ちゃん  2012/04/12 (木) 12:35 ID:XXXXXXXXX
汗汗汗汗汗汗汗汗汗汗汗

スムーススクロールの読み込みを削除したら機能しました!!!!
完璧です!!!

ありがとうございます!!!

やっぱりあなたはすげ~~~~~!!

4  115ちゃん  2012/04/12 (木) 12:44 ID:XXXXXXXXX
ちなみにjQuryとの併用も可。
これいいわ~~~。

本当ありがとうございますね☆

5  シラサヤ  2012/04/12 (木) 16:15 ID:XXXXXXXXX
このやろうwww


Category "HTML・JS・CSS" の最新記事