html
<div class="scroll-top"> <button id="scroll-top"></button> </div>
css
/*=================================================================== フッター ===================================================================*/ .scroll-top #scroll-top { position: fixed; bottom: 10px; right: 10px; background-color: transparent; display: block; width: 70px; height: 70px; background-repeat: no-repeat; background-position: center center; background-size: contain; background-image: url(../../images/ico-pagetop.svg); border: 0; } @media screen and (max-width: 768px) { .scroll-top #scroll-top { width: 40px; height: 40px; } } .scroll-top #scroll-top:hover { opacity: 0.8; }
###js
/*============================== Page Top ==============================*/ $(function(){ $('#scroll-top').on('click',function(){ $('body,html').animate({scrollTop: 0}, 500); }); //link anc otherpage $(window).on('load', function() { var headerHeight = 100; var url = $(location).attr('href'); if(url.indexOf("#") != -1){ var id = url.split("#"); var $target = $('#' + id[id.length - 1]); if($target.length){ var pos = $target.offset().top - headerHeight; $("html, body").animate({scrollTop:pos}, 0); } } }); }); /*============================== Anker Link ==============================*/ $(function(){ $('a[href^="#"]').on('click', function(){ var speed = 400; var href= $(this).attr('href'); var target = $(href == '#' || href == '' ? 'html' : href); var position = target.offset().top; $('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); });