css スクロールトップ

Posted 2021-05-13

スクロールトップ
--------


A [Pen](https://codepen.io/anonie/pen/ZdKRQQ) by [anonie](https://codepen.io/anonie) on [CodePen](https://codepen.io).

[License](https://codepen.io/anonie/pen/ZdKRQQ/license).

<div id="PageTop" style="height:500px; background:#888;">
</div>
<div style="height:500px; background:#666;">
</div>
<div style="height:500px; background:#444;">
</div>

<div id="scrollToTop">
  <a href="#PageTop">トップへ</a>
</div>

$(function() {
  $('#scrollToTop').hide();
  $(function() {
		$(window).scroll(function () {
			if ($(this).scrollTop() > 100) {
				$('#scrollToTop').fadeIn();
			} else {
				$('#scrollToTop').fadeOut();
			}
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

html {scroll-behavior: smooth; overflow: auto;}
a {color: #fff;}

#scrollToTop {
	position: fixed;
	padding:1px;
	margin-bottom:10px;
	position: fixed;
	z-index: 999;
	right: 5px;
	top: 90%;
	opacity: 0.65;
}