1,000円
パーツ設置費用
CSS
#toTop { background-color: #fff; border: solid 3px #666666; border-radius: 50%; box-sizing: border-box; cursor: pointer; opacity: 0; position: fixed; bottom: 20px; right: 20px; transition: ease .5s; height: 60px; width: 60px; z-index: -10; } #toTop.active { opacity: 1; z-index: 10; } #toTop:hover { background-color: #ccc; } #toTop img { image-rendering: -webkit-optimize-contrast; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 21px; }
HTML
<div id="toTop"> <img src="/wp/wp-content/uploads/2021/03/icon-arrow-up-black.png"> </div>
JavaScript
<script>
jQuery(document).ready(function($){ $(window).on("scroll", function() { if ($(this).scrollTop() > 200) { $("#toTop").addClass('active'); } else { $("#toTop").removeClass('active'); } }); $('#toTop').click(function () { $('body,html').animate({ scrollTop: 0 }, 400); return false; }); });
</script>