ページを下にスクロール表示してゆくと、右下にボタンが表示され、クリックするとページを上に戻すボタンを表示する、jqueryを使った機能の実現方法です
必要なファイルと記述内容は・・・
必要なJabascriptファイルはサーバーに設置されたjquery.min.jsというJabascriptファイルです。これを使って下記の内容のコードを、プラグインHeader Footer Code Managerをインストールしたあと、以下のコードを記述します
<script src=”https://it-tubyaku.com/commjs/jquery.min.js” styel=”txt/javascript”></script>
<p><a class=”topsbkl” href=”#”><span style=”color: #fff; font-size: 1.1em;”>∧</span></a></p>
<style>
.topsbkl {position: fixed; bottom: 25px;background:#262;color:#fff;text-align:center;line-height:42px;text-decoration:none;right: 20px;width:42px; height:42px;text-align: center;
text-decoration:none;font-size: 1.5em;-ms-filter: “alpha(opacity=80)”; -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8;z-index:9999;border-radius:4px;}
.tohko {position: fixed;top: 125px;background:#339;color:#fff;text-align:center;line-height:31px;text-decoration:none;right: 20px; width:49px; height:32px;text-align: center;
text-decoration:none;font-size:0.9em; -ms-filter: “alpha(opacity=80)”; -moz-opacity: 0.8; -khtml-opacity: 0.8; opacity: 0.8; z-index:9988;}
</style>
<script>
/*top scroll*/
jQuery(function($){
var pageTop = $(‘.topsbkl’);
pageTop.hide();
$(window).scroll(function () {
if ($(this).scrollTop() > 300) {
pageTop.fadeIn();
} else {
pageTop.fadeOut();
}
});
pageTop.click(function () {
$(‘body, html’).animate({scrollTop:0}, 500, ‘swing’);
return false;
});
});
</script>