フリーのアイコンを利用した「ページトップへ」ボタン
今回は、当ブログ左下に設置している矢印ボタンについてお話したいと思います。
クリックすると、IEはスクロールで、それ以外はフェードイン・アウトでページ上部に移動します。
長い記事を読み終えた後、閲覧者をスムーズにページ上部のメニューバーに誘導することができます。
では早速、作り方いってみましょ～
ブログに合ったアイコンを探そう！
まずは、自分のブログにあったアイコンを探す旅に出ましょう。
少し前に書いたフリーアイコン紹介サイトの記事を参考にしてください。
きれいなアイコンが多すぎて困るかもしれませんが・・・ｗ
アイコンを決めたら、あとはアメーバの画像フォルダか自分で用意したサーバーにアップロードして、URLをメモします。
フリープラグインにスクリプトを書く
次は、フリープラグインにスクリプトを書きます。
<script type="text/javascript">
document.write('<a href="javascript:void(0)"><img title="ページトップへ" class="vtip" style="position:fixed;left:20px;bottom:50px;z-index:999;cursor:pointer;" id="pagetop" alt="" src="画像のURL"/></a>');
jQuery("#pagetop").parent("a").eq(0).click(function (){if(/*@cc_on!@*/false){jQuery("html,body").animate({scrollTop:0},1000);}else{jQuery("html").fadeOut(400).animate({scrollTop:0},100).fadeIn (400);}});</script>
アイコンの座標はleftやbottomの後の数値を変えてやればOKです。document.write('<a href="javascript:void(0)"><img title="ページトップへ" class="vtip" style="position:fixed;left:20px;bottom:50px;z-index:999;cursor:pointer;" id="pagetop" alt="" src="画像のURL"/></a>');
jQuery("#pagetop").parent("a").eq(0).click(function (){if(/*@cc_on!@*/false){jQuery("html,body").animate({scrollTop:0},1000);}else{jQuery("html").fadeOut(400).animate({scrollTop:0},100).fadeIn (400);}});</script>
吹き出しをつけたい方は、こちらの記事を参考にしてトライしてみてください！
小さな配慮ですが、閲覧者には非常に便利ですので、アクセスの上昇にも期待できるかもしれません。
気になった方は、簡単ですので、ぜひトライしてみてください！