JIN:Rには上に戻るボタンが現時点ではありませんので、自分で設置してみました。
[point_maker type=”simple_icon” base_color=”pearl_gray” title_icon=”info-circle-solid” title_color_background=”true” title_color_border=”true” content_type=”text” content_color_background=”false” content_color_border=”true” block_editor=”true”]
ブログカスタマイズについては十分に注意し、自己責任で行なってくださいね。
[/point_maker]こちらのサイト様を参考にさせていただきました。ありがとうございます。
サイト様に記載の通りにすればいいのですが、
カスタマイズからウィジット→フッターに、HTMLで
<div class="pagetop">↑</div>を入力します。↑の部分は、TOPでもいいですし、JIN:Rのアイコンを表示させてもいいと思います。
あとは、カスタマイズからJIN:R設定→計測タグ設定の3 . bodyタグ終了直前に記載するタグ欄に
<script>
// IE、Safari対応
// smoothscroll.js読み込み
// https://github.com/iamdustan/smoothscroll
// セレクタ名（.pagetop）に一致する要素を取得
const pagetop_btn = document.querySelector(".pagetop");
// .pagetopをクリックしたら
pagetop_btn.addEventListener("click", scroll_top);
// ページ上部へスムーズに移動
function scroll_top() {
window.scroll({ top: 0, behavior: "smooth" });
}
// スクロールされたら表示
window.addEventListener("scroll", scroll_event);
function scroll_event() {
if (window.pageYOffset > 100) {
pagetop_btn.style.opacity = "1";
} else if (window.pageYOffset < 100) {
pagetop_btn.style.opacity = "0";
}
}
</script>を書きます。
あとは、CSSで調整するだけです。以下はCSSの例です。
.pagetop {
font-size:1em;
cursor: pointer;
position: fixed;
right: 30px;
bottom: 30px;
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
border-radius: 50%;
transition: .3s;
color: #201B1D;
background: #ff2c37;
/* デフォルトは非表示 */
opacity: 0;
}
.pagetop:hover {
box-shadow: 0 0 10px #201B1D;
}以上です、お疲れ様でした！
