<p id="toTop"><a href="#top"><img src="img/toTop.png"></a></p>
$(function(){ var topBtn = $('#toTop'); topBtn.hide(); //スクロールがトップから100pxに達したらボタン表示 $(window).scroll(function () { if ($(this).scrollTop() > 100) { topBtn.fadeIn(); } else { topBtn.fadeOut(); } }); $('a[href^=#]').click(function(){ var speed = 500; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; $("html, body").animate({scrollTop:position}, speed, "swing"); return false; }); });
style.cssに追加する
@charset "utf-8"; /* Back to top button */ #toTop { position: fixed; bottom: 50px; right: 180px; } #toTop a { width: 100px; height: 100px; display: block; background: url(img/toTop.png) no-repeat; text-decoration: none; opacity: 0.5; } #toTop a:hover { opacity: 1; }