【ノンデザイナー向け】WordPressで今風なページトップを超簡単に設置する方法

Feb 8, 2012

2011年くらいから、
ページをスクロールすると、フワっと表示されるページトップ(クリックするとページの一番上にいくやつ)が
流行ってますよね! 超簡単にコピペするだけで作れるソース作ったので、公開します!

まず管理画面から、ヘッダー修正画面へ行きましょう

ここから超簡単3ステップ!

STEP01.</head>タグの前に、下記コードをコピペ

<script src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript">
$(window).scroll(function () {
    if ($(this).scrollTop() > 100) {
        $('#pagetop').fadeIn();
    } else {
        $('#pagetop').fadeOut();
    }
});
</script>

STEP02.<body>タグを、下記に変更

<body id="top">

STEP03.<body id="top">タグの下に、下記コードをコピペ

<div id="pagetop" style="display:none;position:fixed;right:10px;bottom:10px;">
<a href="#top" style="padding:5px;background:#ccc;color:#fff;display:block;font-size:20px;font-weight:bold;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;"></a></div>

これで完成です!
サイトの右下に、フワッとページトップボタンが出ればOKです!

ちょっとCSSとか分かるよってひとは、
STEP03の数字とか色とかをいじれば、微調整も可能です!

デフォルトは、
画面右下から10pxずつ離して(right:10px;bottom:10px;)、
背景が薄グレー(background)、
矢印の色が白(color)、
矢印の大きさが20px(font-size)、
角丸8px(border-radius)

となっております。

いろいろいじってみてください。
是非!

おまけ

「ページトップをクリックした時に、スムーズに上まで行ってほしいよう!」
という方は、下記がとても参考になります。
スムーズ スクロール ページトップ – Google 検索

白坂翔
白坂翔

東京のWEB制作会社の代表をしています。デザイナー兼ディレクター。
JELLY JELLY CAFEというお店のオーナーでもあります。MORE

LINE@やってます

'stats.label.addfriend' (MISSING TRANSLATION)

あわせてどうぞ

「オクトーバーフェス」じゃなくて、「オクトーバーフェスト」だよ、っていうお話