よもやまチョモランマ

ページトップのデフォルト化

静的サイトをWordPressに移行すると、必ずぶつかる「JSやPHPがうごかなくなっちゃった問題」
もう、うんざりですよ。

長いこと「WPにしても問題なく動くようにするにはどうしたらいいか」考えてきましたけども、とりあえずひとつクリアできたようなので、記録しておきます。

▼参考サイト
https://www.webopixel.net/javascript/538.html
jQueryでスクロールすると表示する系いろいろ

ポイントは、JavaScriptをHTMLに直書き。
外部ファイルにするとテンプレート変更したらはずれちゃうからね。

<p id="pagetop"><a href="#">▲<br>PAGE TOP</a></p>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	var topBtn = $('#pagetop');	
	topBtn.hide();
	//ここまで下がったらボタン表示
	$(window).scroll(function () {
		if ($(this).scrollTop() > 300) {
			topBtn.fadeIn();
		} else {
			topBtn.fadeOut();
		}
	});
	//スクロールしてトップ
	topBtn.click(function () {
		$('body,html').animate({
			scrollTop: 0
		}, 1000);
		return false;
	});
});
</script>

画像も使わない。
CSSだけで装飾する。

#pagetop {
    position: fixed;
    bottom: 30px;
    right: 15px;
    font-size: 10pt;
}
#pagetop a {
    color: #fff;
    width: 80px;
    padding: 18px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
    text-decoration: none;
    background: #666;
}
#pagetop a:hover {
    text-decoration: none;
    background: #999;
}

静的サイトでもこういう作り方にしておけば、いざWordPressにするとなっても慌てずに済む。
それが大事。