Pages

2014/06/20

Bloggerに「上に戻る」ボタンを設置する

このブログにもある右下にある上に戻るボタン〔常駐タイプ)を設置する方法。(ツールチップは別です。)

実装は簡単!ガジェットに追加するだけ。
レイアウト>ガジェットを追加>HTML/JavaScriptを選択し、下のコードをコピペでOKです。(タイトルの記入は不要です。)
画像〔アイコン)は用意してください。その画像のURLをhttp://xxxxxxxのところに入れます。

↓コレをコピペ
<div class="backtotop"><a style="display:scroll;position:fixed;bottom:5px;right:5px;"  href="#" rel="nofollow" title="Back to Top" onclick="backToTop(); return false"><img style="border:0;" src="http://xxxxxxx"/></a></div>

<style type="text/css">.backtotop a:hover {background:none;}</style>

<script type='text/javascript'>
function backToTop() {
    var x1 = x2 = x3 = 0;
    var y1 = y2 = y3 = 0;

    if (document.documentElement) {
        x1 = document.documentElement.scrollLeft || 0;
        y1 = document.documentElement.scrollTop || 0;
    }

    if (document.body) {
        x2 = document.body.scrollLeft || 0;
        y2 = document.body.scrollTop || 0;
    }

    x3 = window.scrollX || 0;
    y3 = window.scrollY || 0;

    var x = Math.max(x1, Math.max(x2, x3));
    var y = Math.max(y1, Math.max(y2, y3));

    window.scrollTo(Math.floor(x / 2), Math.floor(y / 2));

    if (x > 0 || y > 0) {
        window.setTimeout("backToTop()", 25);
    }
}
</script>