ameeeee
6/24/2019 - 1:29 AM

jquery:スクロールトップ(フェードイン

jquery:スクロールトップ(フェードイン

A Pen by anonie on CodePen.

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;
}