スクロールすると途中で表示される「トップへ戻るボタン」の実装
解決したいこと
スクロールすると途中で表示される「トップへ戻るボタン」の実装
本来であれば、少しスクロールすれば、右下にJump To Topボタンが表示されて欲しいのですが出てこないのはなぜなのか、ご教授願いたいのでぜひお願いいたします。
HTML
<footer>
<div class = "footer-wrapper">
<div class = "footer-container">
<div class = "inner">
<h2>企業情報</h2>
<ul>
<li><a>ご利用方法</a></li>
<li><a >ニュースルーム</a> </li>
<li> <a >株主・投資家のみなさまへ</a></li>
<li><a >XXXXXXXXXXXX</a></li>
<li><a >XXXXXXXXXXXX</a></li>
<li><a> XXXXXXXXXXXX</a> </li>
<li> <a >採用情報</a> </li>
</ul>
</div>
<div class = "inner">
<h2>コミュニティ</h2>
<ul>
<li><a >ダイバーシティ</a></li>
<li><a >アクセスビリティ</a></li>
<li><a>お友達を招待</a></li>
<li><a >XXXXXXXXXXXX</a></li>
<li><a >XXXXXXXXXXXX</a></li>
</ul>
</div>
<div class = "inner">
<h2>ホスト</h2>
<ul>
<li> <a >XXXXXXXXXXXX</a></li>
<li><a >XXXXXXXXXXXX</a></li>
<li><a >XXXXXXXXXXXX</a></li>
</ul>
</div>
<div class = "inner">
<h2>サポート</h2>
<ul>
<li><a >新型コロナウイルスに対する取り組み</a></li>
<li><a >ヘルプセンター</a></li>
<li><a >キャンセルオプション</a></li>
<li><a >コミュニティサポート</a></li>
<li><a >信頼＆安全</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-bottom">
<p>このサイトの素材は全て著作権フリーのものを使用しています。
<div class = "description">
<span>プライバシーポリシー </span>
<span>利用規約 </span>
<span>サイトマップ</span>
<span>企業情報</span>
</div>
<p>© 2021- LiNew, Inc. All rights reserved.</p></p>
</div>
</footer>
<div id = "jump">Jump To Top</div>
css
#jump {
position: fixed;
right: 0;
bottom: 0;
height: 3rem;
line-height: 3rem;
color: white;
text-align: center;
cursor: pointer;
background-color: black;
padding: 0 10px;
transition: all .5s ease;
/*デフォルトで非表示にする*/
opacity: 0;
visibility: hidden;
}
.active{
opacity: 1;
visibility: visible;
}
jquery
//■page topボタン
$(function(){
var topBtn=$('#jump');
topBtn.hide();
$(window).on('load scroll', function(){
if($(this).scrollTop() > 100) {
btn.addClass('active');
}else{
btn.removeClass('active');
}
});
//スクロールしてトップへ戻る
btn.on('click',function () {
$('body,html').animate({
scrollTop: 0
});
});
});
### 自分で試したこと
参考資料：https://recooord.org/scroll-to-top/
：https://agohack.com/page-top-button-css-jquery/
資料を参考にやってみるも、やはりスクロールしても途中で出てきませんでした。
あとは、cssもセレクタ部分を消したり、付け足したりなどしてみましたが表示されるか、表示されないかの２択だったので、原因はcss？jquery？てな感じで悩んでいます。
0
