注目タグ

テンプレート・プラグイン

トピック詳細

TOPページアイコンを右端に設定したい。

今回も皆様のお力を借りるべきこちらへ投稿させて頂きます。

タイトル通りなのですが、ブログの右端にTOPへ戻るアイコンを
設置したいのですが、上手く行きません。
ネットでかなり探してたどり着いたのですが、どうもしっくりきません。


----------------------------------------------


【コード】
<div id="back-to-top" style="position:fix ed;right:12px;bottom:12px"><a href="#"& gt;<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/


■もう一つ知りたいことがあります。
画像の青枠のようにタブを付けたいのですが、簡単に付けることは
可能でしょうか?

じゃあ、テンプレートを現在のから変更しろよと言われそうですが、
現在のまま行いたいのです。どうぞよろしくお願い致します。

2014年07月19日 10:14  by キムさん

コメント一覧 13件中、11~13件表示

  • 皆様ご回答ありがとうございます。
    参考サイトを見て勉強した後、再度ご質問させて下さいませ。


    JavaScriptというものが解っておりませんので、こちらも勉強でしょうか。
    ブログではHTMLとCSSしかないと思っていましたが・・・(汗)


    また、標野ゆき様のご指摘では簡単にはいかないようなので、
    こちらはあきらめたいと思います。
    ホントやりたいことが全然解らないので皆様には感謝しております。
    標野様につきましては再度のアドバイスありがとうございます。


    少々勉強してまいります ^^

    2014年07月19日 19:25 by キムさん

  • 参考サイトとして提示しているURLはただのテンプレート利用者ではないのかと思います。
    参考にしたのは、どの記事なのでしょうか?

    単にテンプレートを参考にしただけならテンプレート作者のブログは
    http://subculsheets.blog.fc2.com/
    こちらになります。

    共有テンプレート:「BLUENOIR-Zwei-」
    に使われているトップに戻るアイコンをお使いになっているテンプレート「webdb3_n_blue」にてカスタマイズしたい という話なのでしょう。

    ◯2 http://arinogotokuatumarite.blog19.fc2.com/blog-entry-11 6.html
    こちらの記事にあるように「onclick="scrollTo(0,0); return false;&quo t;」ジャバスクリプトを使えたば表示されません。

    ---------------------------------------

    ◯1 JavaScriptのjQueryを利用しているだけです。

    <script type="text/javascript" src=& quot;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行をそのままHTMLの<title>タグの後にでもコピーすれば出来ます。
    ただし、JavaScriptがoffの環境では何も表示されませんし、何も動作しません。

    やり方を詳しく知りたいのならば
    http://syncer.jp/jquery-to-top-button
    こちらの記事を読んでみてはいかがでしょうか。

    2014年07月19日 13:12 by ロギラキ

  • JavaScriptのサンプルを移植して
    ああでもないこうでもないと模索するくらいなら
    希望通りのJavaScriptを備えたテンプレートを探してきて
    それを現在のテンプレートそっくりに編集する方が労が少ないような気がします^^;

    >>画像の青枠のようにタブを付けたい
    何をどうしたいのかいまひとつ量りかねますが
    一つ一つサイズの違う画像にタブ付きのボーダーをつけるには
    タブ付きの部分とついていない部分を別の画像(または別の画像扱い)にして
    中間部の罫を繰り返す必要があります。

    新しいタイプのCSS3では
    ボーダーに画像を用いることができるようですが
    閲覧者さんのブラウザが古いタイプだと正しく表示されません。
    また、画像を分割するための位置などをきちんと計算する必要がありますし
    「簡単」というわけにはいかないと思います。

    2014年07月19日 12:11 by 標野ゆき

<< < 1 2