<!--top-->
<style>
#top {
position: relative;
text-align: end;
right: 0.5em;}
#top.btn-circle-flat {
position: fixed;
z-index: 1000;
right: 1rem;
bottom: 1rem;
display: inline-block;
text-decoration: none;
background: #f2f5fa;
color: #19284d;
font-weight: 500;
width: 3em;
height: 3em;
line-height: 3em;
border-radius: 50%;
text-align: center;
overflow: hidden;
-webkit-transition:all 0.3s ;
-moz-transition:all 0.3s ;
transition:all 0.3s ;}
#top.btn-circle-flat:hover {
background: #19284d;
color: #fcc116;
cursor: pointer;}
@media screen and (max-width: 560px) {
a #top {
margin-right: 0.5rem;
margin-bottom: 2rem;}
#top.btn-circle-flat {
width: 2.5rem;
height: 2.5rem;
line-height: 2.5rem;
right: 1.5rem;
bottom: 3rem;
box-shadow: 0 5px 10px 0 rgba(0,0,0,0.15), 0 3px 20px 0 rgba(0,0,0,0.0), 0 5px 3px -2px rgba(0,0,0,0.0);
opacity: 0.9;
}}
</style>
<div id="top" class="btn-circle-flat">↑</div>
<script type="text/javascript">
jQuery(function() {
    var topBtn = jQuery('#top');    
    /*最初はボタンを隠す*/
    topBtn.hide();
    /*スクロールが300に達したらボタンを表示させる*/
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 300) {
            topBtn.fadeIn( 'slow' );
        } else {
            topBtn.fadeOut( 'slow' );
        }
    });
    /*スクロールしてトップに戻る*/
    /*500の数字を大きくするとスクロール速度が遅くなる*/
    topBtn.click(function () {
        jQuery('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});
</script>

<!--/top-->