「ページ内リンク」で検索をかけるとわかると思いますが、ページ内リンクのアニメーションは単なる見栄以上の効果があります。
リンクをクリックすると別のページに移動すると言う固定観念がある中、ページ内リンクで一瞬のうちに同ページの別の場所に移動されると、閲覧者は多少なりとも混乱するのです。
アニメーションはその混乱を排除するために役に立ちます。
と言うことで、実装開始！ と言いたいところでしたが…… これも結構手間がかかりました。
まず番頭が見つけたのは、「このページの先頭へ、をちょこっとおしゃれに[スクリプトAとします]」(ブログ:SiMPLE*SiMPLE)
よくある「このページの先頭へ」というページ内リンクをクリックすると、するするっと先頭までアニメーションするjavascriptです。
ただ、番頭が欲しかったのは「先頭へ」と上に上がるアニメーションより、下に上がるアニメーションでした。
そこで、もう少し調べたところ見つけたのが、「ページ内リンク（ID）にするするっと移動する[スクリプトBとします]」(ブログ：web-conte.com)。
これで上にも下にもアニメーションできます
早速実装！ javascriptファイルをアップロードして HTMLのヘッダーで指定するだけ！ と思いきや……
番頭の環境(WindowsXP SP2 / Firefox1.5.0.9)では、リンク先のIDが画面下のほうにあるとき、延々と下にスクロールし続ける(スクロールバーで上に移動しようとしてもすぐ一番下まで下がる)と言う不具合が。
(リンクで指定した場所がウインドウの一番上に来るまでスクロールし続ける仕様なのではないかと思います)
さすがにスクリプトを延々眺めて改変を試みるのには無理があると思ったので、別のスクリプトを探しました。
で、見つけたのが、「[ajax] ページ内リンクでスムーススクロール[スクリプトCとします]」(ZEROBASE)
これだと上記のような「延々下にスクロール」と言う不具合はないようです。
しかし、このスクリプトCも少し気になるところが…
- スクリプトAとは逆に、スクリプトCは下向きのアニメーションしかできないようです。そのため、「先頭に戻る」スクリプトにはスクリプトAを導入する必要があります。なおこの方法では一番下から中央あたりにアニメーションリンクすることが出来ません。
- HTMLのヘッダーには「スクリプトAのjsファイル」→「スクリプトCのjsファイル(2ファイル)」の順に設定する必要があります。
逆にするとなぜか「先頭へ戻る」のアニメーションが働きません。
- リンク先の場所は<a name="xxx"></a>で囲む必要があるようです。
最初僕は<hx id="xx"></hx>と指定していたので上手く動きませんでした。
紆余曲折で何とか実装できましたが、少し不満もあります。
もちろん、ど素人が無料で他人のスクリプトを拝借している以上、文句は言えない立場なのですが。
スクリプトBの不具合がなければなぁ……誰か有償で改変してくれないだろうか…
と、自分勝手なことを考えてしまった番頭でした。
« 文章を隠す