ページトップ
一定距離をスクロールしたときに、フッと現れる「ページの先頭へもどる」ボタン。
このページでも使用しています。
分かりやすいように、とっても目立つ赤色のボタンが表示されます。
画面右下に固定されるタイプは、ページトップから100px以内は非表示。 100px以上スクロールすると表示されます。 コンテンツ下端から100px以内までスクロールすると非表示になります。（値は変更可能）
使用するclass名
.pageTop：通常タイプ .pageTopFix：画面右下に固定タイプ
View
PageTop
PageTop
PageTop
PageTop
Source
HTML
<div class="pageTopFix">PageTop</div>
<div class="pageTop">PageTop</div>
<div class="pageTop">PageTop</div>
<div class="pageTop">PageTop</div>Javascript
;jQuery(document).ready(function ($) {
// 「ページトップへ」の表示
$('.pageTopFix').hide();
$(window).scroll(function () {
var scrollHeight = $(document).height();
var scrollPosition = $(window).height() + $(window).scrollTop();
var topSpan = 100; //上端から○pxで表示
var bottomSpan = 100; //下端から○pxで非表示
if ($(this).scrollTop() > topSpan ) {
if ((scrollHeight - scrollPosition) < bottomSpan ) {
$('.pageTopFix').fadeOut();
} else {
$('.pageTopFix').fadeIn();
}
} else {
$('.pageTopFix').fadeOut();
}
});
/* スクロール関連 */
// ページトップへ
$('.pageTopFix, .pageTop, .pageTopBlock').targetScroller({
target: 'html',
duration: 800,
easing: 'easeOutQuint'
});
});
CSS
/* =======================================================
ページトップ pageTop
========================================================== */
.pageTopFix,
.pageTop { cursor: pointer; }
.pageTopFix {
background: red;
background-size: contain;
position: fixed;
z-index: 8000;
text-indent: -9999px;
}
@media print, screen and (min-width: 768px) {
.pageTopFix {
bottom: 50px;
right: 50px;
width: 40px;
height: 40px;
}
}
@media screen and (max-width: 767px) {
.pageTopFix {
bottom: 40px;
right: 20px;
width: 40px;
height: 40px;
}
}
SCSS
/* =======================================================
ページトップ pageTop
========================================================== */
//PC スタイル
@mixin pc_style {
bottom: 50px;
right: 50px;
width: 40px;
height: 40px;
}
//SP スタイル
@mixin sp_style {
bottom: 40px;
right: 20px;
width: 40px;
height: 40px;
}
//================ 設定ここまで =================
.pageTopFix,
.pageTop {
cursor:pointer;
}
.pageTopFix {
background:red;
background-size:contain;
position: fixed;
z-index:8000;
text-indent:-9999px;
}
@media print, screen and (min-width: 768px) {/**/
.pageTopFix {
@include pc_style;
}
}
@media screen and (max-width: 767px){/**/
.pageTopFix {
@include sp_style;
}
}
