カテゴリー: JS

JS部分

<script type="text/javascript">
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();  
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 1000);
return false;
});
});
});
</script>

HTML部分

<p id="back-top" style="display: block;">
<a href="#header"><span><img src="../img/totop.png" alt="ページトップへ戻る"></span></a>
</p>

CSS部分

にょきっと下から出てくるエフェクト

#back-top {
position: fixed;
bottom: -8%;
right: 3%;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
transition: all 0.2s ease;
}
#back-top:hover {
bottom: 0%;
}
#back-top span {
width: 65px;
height: 134px;
display: block;
}