今回も皆様のお力を借りるべきこちらへ投稿させて頂きます。
タイトル通りなのですが、ブログの右端にTOPへ戻るアイコンを
設置したいのですが、上手く行きません。
ネットでかなり探してたどり着いたのですが、どうもしっくりきません。
----------------------------------------------
【コード】
<div id="back-to-top" style="position:fixed;right:12px;bottom:12px"><a href="#"><img src="画像のURLを用意" /></a></div>
<script>
$(function(){
$("#back-to-top").hide();
$(window).scroll(function(){
if($(this).scrollTop() > 600){
$("#back-to-top").fadeIn();
} else{
$("#back-to-top").fadeOut();
}
});
$("#back-to-top a").click(function(){
$("body,html").animate({
scrollTop:0
},1000);
return false;
});
});
</script>
----------------------------------------------
上記コードをHTML内に入れれば事は済むと思いましたが、思うようにはいきませんでした。
まずスクロールする前からアイコンが出っぱなしで、下にスクロール
後にアイコンを押すとTOPへただ戻るだけです。
（数値を変更しても意味なしでした）
①スクロールするように戻りたい
②アイコンを押してTOPへ戻るとURLに「#」がついてしまう事を避けたい
参考サイトは⇒ http://deskpost.blog103.fc2.com/
■もう一つ知りたいことがあります。
画像の青枠のようにタブを付けたいのですが、簡単に付けることは
可能でしょうか？
じゃあ、テンプレートを現在のから変更しろよと言われそうですが、
現在のまま行いたいのです。どうぞよろしくお願い致します。
このコミュニティにご参加頂くと、コメントの書き込みができます
色々と連休中に試したのですが、クロームではよいけれどIEでは
表示が上手く行かない事実に出くわしました。
よって表示を求めるならば
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.3");</script>
<script type="text/javascript" src="http://blog-imgs-43.fc2.com/s/u/b/subculsheets/n-top.js"></script>
こちらの3行を入れ込んだ方が良いと解りました。
自分で改良が出来ませんが・・・
＞上記の2行を
＞<script type="text/javascript" src="http://static.fc2.com/js/lib/jquery.js"></script>
＞この1行に変えるだけです。
こちらも試してみましたが、IEではブラウザーを開いた時に一瞬アイコンがでます。
それに右カラムに表示がかかってしまいますのでいまいちという事が解りました。
調整が出来ないん事がデメリットですが、表示されるまでこれで頑張ります。
せっかく、お教え頂きましたが・・・
ちょっとした事が難しいです。。
いつもありがとうございます！