ページトップへ戻るボタンとカスタマイズ

ページトップへ戻るボタンとカスタマイズ

| 2012年07月14日(土) |

0 |

【2014/11/28記事修正しました】

webdesignerwallさんのコードをそのまま使った場合に、ページトップへ戻る際のアニメーションに不具合が起こるとご指摘頂きました。
以下のようにアニメーションの fadeout() に stop() を追加する事で回避できます。
（教えて頂きありがとうございました！）
スクロールでtopへ戻るボタンを表示するjQueryコード（スムーススクロール） | memocarilogより

数日前から導入していたので、既にご存じの方もいらっしゃるかもしれませんが…

ページを下へスクロールすると
ページトップへスムーズにスクロールして戻るボタンが現れる
jQueryのコードを導入してみました☆

スクロールバックボタン

動作は、当ブログの【トップページ】をご参照くださいませ。。導入にあたり、下記サイトさんを参考にさせていただきました。

【参考リンク】
・webdesignerwall:Animated Scroll to Top
・スクロールでtopへ戻るボタンを表示するjQueryコード（スムーススクロール） | memocarilog

※【webdesignerwall】さんからサンプルプログラムがダウンロード出来ます☆
※サンプルプログラムに不具合があるそうです。。

んで…

それをちょっとアレンジというかカスタマイズして。。。

色々カスタマイズボタン

個別の記事へ多機能(というほどのものでもないですけど…)ボタンを設置してみました☆
（当記事の右側参照。。）

アップで見ると…
カスタマイズボタンアップ

こんな感じですね。。

ページトップへ移動

【ページトップへスクロールするボタン】

コメントリンク

【記事のコメント欄へ飛ぶボタン】

次の記事へリンク

【前の記事や次の記事へのリンクボタン】

参考までに…
当ブログのソースを晒しておきます。。

あくまで当ブログに合わせた形になってるんで…
利用される方は各々のブログスタイルに変更してお使いくださいませ。。
※当ブログは【Serene Bach】を使用してるので独自タグはご自分のブログサービスのモノをご使用くださいませ。。

※ソースは【jQuery】を既に導入されてる事が前提です。もしも未導入な方は当ブログ記事【jTweetsAnywhere導入】を参照いただくかググって調べてくださいませ(^^

<head>～</head>内へ下記の様に書き込みます。

<script>
$(document).ready(function(){
    // hide #back-top first
    $("#back-top").hide();
    // fade in #back-top
    $(function () {
        $(window).scroll(function () {
            if ($(this).scrollTop() > 100) {
                $('#back-top').fadeIn();
            } else {
                $('#back-top').fadeOut();
            }
        });
        // scroll body to 0px on click
        $('#back-top a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });
});
</script>

~~【webdesignerwall】さんのサンプルコードのままです。~~
※記事修正済みです。

んで…

個別記事用HTMLテンプレート内への記載

<!-- Extrabotan START -->
<div class="extrabotan_box">
<div class="extrabotan">
<p id="back-top">
<a href="#top" title="ページトップへ">△Top</a>
</p>
</div>
<div class="extrabotan">
<a href="{entry_permalink}#comments" title="この記事へコメント">comment</a>
</div>
<div class="extrabotan">
<a href="{next_permalink}" title="次の記事
{next_title}">NEXT→</a>
</div>
<div class="extrabotan">
<a href="{prev_permalink}" title="前の記事
{prev_title}">←PREV</a>
</div>
</div>
<!-- Extrabotan END -->

以下の独自タグを使用。。

【コメント欄へのリンク】
記事の個別リンクアドレスを表示する{entry_permalink}を使用。

【次の記事へのリンク】
ひとつ後の記事の固定リンクアドレスを表示する{next_permalink}と
ひとつ後の記事のタイトルを表示する{next_title}を使用。

【前の記事へのリンク】
ひとつ前の記事の固定リンクアドレスを表示する{prev_permalink}と
ひとつ前の記事のタイトルを表示する{prev_title}を使用。

ＣＳＳへの記載

.extrabotan_box {
	position: fixed;
	bottom: 80px;
	margin-left: 800px;
}

.extrabotan {
	margin: 8px 0px 0px 0px;
}

.extrabotan p {
	margin: 0px;
}

.extrabotan a {
	width: 90px;
        display: table-cell;
 	border: 1px solid #b0b0b0;       
	text-align: center;
	font: 11px 150% Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-decoration: none;
	color: #5f87af;
	/* background color transition */
	-webkit-transition: 1s;
	-moz-transition: 1s;
	transition: 1s;
}

.extrabotan a:hover {
        color:#FFFFFF;
	background-color: #b0b0b0;
}

こんな感じです。。
先にも述べましたが。。

あくまで当ブログに合わせた形になってるんで…
利用される方は各々のブログスタイルに変更してお使いくださいませ。。

ちなみに…
この形式だと最新記事で、次の記事が無い時にも【次の記事】表示がされちゃうのがちょっとモヤモヤポイントですけどね(^^;

とりあえず…

今回は個別記事ページへの設置ですが。。

今後トップページの方へも導入する予定ではいます(^^

2012年07月14日(土) 18:14 |