ページトップのデフォルト化
WEBWordPress
CSSHTMLJavascript
静的サイトを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にするとなっても慌てずに済む。
それが大事。