トップへ戻るボタンを設置する方法
その①：フッタに以下のコードを張り付ける
まず、「ダッシュボード」から「デザイン」を開いてください。
すると、こんな画面が出てくるので、青丸で囲まれた部分をクリックして画面を切り替えてください。
そしたら、「フッタ」を選択して、以下のコードを貼り付けてください。
<!-- 「ページトップへ戻る」ボタン -->
<div id="page-top-area">
<a id="page-top-button"><i class="fa fa-chevron-up"></i></a>
</div><script>
(function($) {
$(function() {
var $w = $(window), $pageTopArea = $('#page-top-area'), isShow = false;
setInterval(function() {
if ($w.scrollTop() > 500) {
if (!isShow) {
isShow = true;
$pageTopArea.fadeIn();
}
} else {
if (isShow) {
isShow = false;
$pageTopArea.fadeOut();
}
}
}, 1000 / 30);
$('#page-top-button').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
});
});
})(jQuery);
</script>
青字部分「fa-chevron-up」のコードを変えると、矢印マークを変更することができます。
fa-chevron-up
fa-chevron-circle-up
fa-arrow-circle-o-up
fa-arrow-circle-up
fa-hand-o-up
fa-caret-up
fa-caret-square-o-up
fa-arrow-up
fa-long-arrow-up
fa-caret-square-o-up
fa-angle-double-up
fa-angle-up
イメージ図は上から順番にこんな感じです。
その②：デザインCSSに以下のコードを張り付ける
先ほどの画面に戻り、今度は「デザインCSS」をクリックして、以下のコードを貼り付けてください。
/* ページトップへ戻るボタン */
#page-top-area {
display: none;
position: fixed;
right: 20px;
bottom: 20px;
margin: 0;
padding: 0;
text-align: center;
}
#page-top-button {
color: rgba(0,0,0,0.6);
text-decoration: none;
display: block;
cursor: pointer;
font-size: 500%;
}
#page-top-button:hover {
color: rgba(0,0,0,0.95);
}
その③：「headに要素を追加」に以下のコードを張り付ける
「ダッシュボード」から「設定」を開いて、「詳細設定」をクリック します。
そしたら、「headに要素を追加」という項目があるので、そこに以下のコードを張り付けてください。
<!-- WEBアイコンフォント「Font Awesome」 -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
これで終わりです。お疲れ様でした(^^)/
最後に
皆さんは無事に「トップへ戻るボタン」を設置出来たでしょうか？出来たのであれば嬉しいです。なお分からない点がありましたら、なんでもご相談ください(^^♪