TOPへ戻るボタンを組み込む

STACK Websiteに、TOPへ戻るボタンを組み込む。プラグインでと思ったけど、HTMLで組み込んだ。後々、テーマを再利用するには、HTMLで組み込んでおいた方が便利だろうから。
ネットで紹介されていた、下記を参照。

●HTMLのメモ

【index.phpなど】
&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">&lt;/script>
&lt;a href="#top" class="page_top">&lt;i class="fa fa-angle-double-up">&lt;/i>&lt;/a>


&lt;script type="text/javascript">
$(function() {
    var pageTop = $('.page_top');
    pageTop.hide();
    $(window).scroll(function () {
        if ($(this).scrollTop() > 600) {
            pageTop.fadeIn();
        } else {
            pageTop.fadeOut();
        }
    });
    pageTop.click(function () {
        $('body, html').animate({scrollTop:0}, 500, 'swing');
        return false;
    });
});
&lt;/script>

【index.phpなど】

$(function() {

var pageTop = $('.page_top');

pageTop.hide();

$(window).scroll(function () {

if ($(this).scrollTop() > 600) {

pageTop.fadeIn();

} else {

pageTop.fadeOut();

}

});

pageTop.click(function () {

$('body, html').animate({scrollTop:0}, 500, 'swing');

return false;

});

</script>

●デザインのためのメモ

【style.css】
.page_top {
    position:fixed;
    bottom:10px;
    right:10px;
    padding: 5px 15px;
    color:#fff;
    font-size:20px;
    text-decoration:none;
    background:#000;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    z-index: 100;
}
.page_top:hover {
    background:#000;
    opacity: 0.7;

【style.css】

.page_top {

position:fixed;

bottom:10px;

right:10px;

padding: 5px 15px;

color:#fff;

font-size:20px;

text-decoration:none;

background:#000;

border-radius: 30px;

-webkit-border-radius: 30px;

-moz-border-radius: 30px;

z-index: 100;

}

.page_top:hover {

background:#000;

opacity: 0.7;