パーツ番号 08-13-06 ・ JavaScript使用
上スクロール時だけ現れるトップへ戻るボタン
上方向にスクロールした時だけボタンが出現し、下方向にスクロールしている間は隠れます。WordPressの記事ページで、読み返したいユーザーの動作に寄り添うUIとして使えます。
プレビュー
ソースコード
HTML
<div class="d08-13-06-stage">
<div class="d08-13-06-scroll">
<div class="d08-13-06-body">
<p>↑ 上スクロールでのみボタンが出現します</p>
<div class="d08-13-06-block"></div>
<div class="d08-13-06-block"></div>
<div class="d08-13-06-block"></div>
<div class="d08-13-06-block"></div>
<div class="d08-13-06-block"></div>
</div>
</div>
<button type="button" class="d08-13-06-top" aria-label="トップへ戻る">▲ TOP</button>
</div>CSS
.prev.d08-13-06{padding:0;display:block}
.d08-13-06-stage{position:relative;width:100%;height:100%;min-height:260px;overflow:hidden;background:#f0fdfa}
.d08-13-06-scroll{position:absolute;inset:0;overflow-y:auto}
.d08-13-06-body{padding:16px}
.d08-13-06-body p{font-size:11.5px;color:#0f766e;margin:0 0 12px;text-align:center}
.d08-13-06-block{height:70px;border-radius:8px;margin-bottom:12px;background:linear-gradient(135deg,#ccfbf1,#5eead4)}
.d08-13-06-top{
position:absolute;right:14px;bottom:14px;z-index:3;
border:none;border-radius:999px;padding:10px 16px;font-size:12px;font-weight:700;cursor:pointer;
background:#0f766e;color:#fff;box-shadow:0 8px 18px rgba(15,118,110,.35);
opacity:0;visibility:hidden;transform:translateY(10px);
transition:opacity .25s ease,transform .25s ease,visibility .25s;
}
.d08-13-06-stage.is-up .d08-13-06-top{opacity:1;visibility:visible;transform:translateY(0)}JavaScript
(function(){
var stage=document.querySelector('.d08-13-06-stage');
if(!stage)return;
var scroller=stage.querySelector('.d08-13-06-scroll');
var btn=stage.querySelector('.d08-13-06-top');
var last=0;
scroller.addEventListener('scroll',function(){
var top=scroller.scrollTop;
if(top<last-2&&top>0){stage.classList.add('is-up');}
else{stage.classList.remove('is-up');}
last=top<=0?0:top;
});
btn.addEventListener('click',function(){
scroller.scrollTo({top:0,behavior:'smooth'});
});
})();クラス名 .d08-13-06 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。