トップにスクロールして戻るボタン

1月 23, 2020

—

<script type="text/javascript">
	$(function() {
		var topBtn = $('#page-top'); 
		topBtn.hide();
		//スクロールが100に達したらボタン表示
		$(window).scroll(function () {
			if ($(this).scrollTop() > 200) {
				topBtn.fadeIn();
			} else {
				topBtn.fadeOut();
			}
		});
		//スクロールしてトップ
		topBtn.click(function () {
			$('body,html').animate({
				scrollTop: 0
			}, 500);
			return false;
		});
	});
</script>

<div id="page-top"><a href="#page" title="トップへ"><img src="<?php bloginfo('template_url'); ?>/images/gotop-takushon.svg" alt="Top" width="49" height="54"/><span>トップへ</span></a></div>

<body>の直下に上記のタグを設置する。