Matsu Code 
パソ君
スクロール途中から表示される
ペーMatsu Codeップへ戻るボタンはどうやって実装するの？
こんな疑問にお答えします。
よく「ペーMatsu Codeップボタン」が、少しスクロールしてから表示されるサイトがありますよね。
下記みたいに↓
これ実は簡単に実装できちゃいます。
すぐにできるよ！
ということで、この記事では「スクロール途中から表示されるペーMatsu Codeップへ戻るボタンリンクを作成」について解説していきます！
通常のペーMatsu Codeップボタン作成は下記をどうぞ↓
【jQuery・CSS】ペーMatsu Codeップへ戻るボタンリンクを作成【コピペOK】
この記事でわかること
・ペーMatsu Codeップへ戻るボタン【スクロール途中から表示】
ページ内リンクのスクロール方法を調整したいなら下記記事をどうぞ↓
【CSS・jQuery】ページ内リンクのスムーススクロール作り方【コピペOK】
目次
【jQuery】ペーMatsu Codeップへ戻るボタン【スクロール途中から表示】
See the Pen ➀：ペーMatsu Codeップボタン by matsu-code (@matsu-code) on CodePen.
下にスクロールしたら、ペーMatsu Codeップボタンが出てくるかと思います。
主なコードは下記↓
<main class="main">
<h1 class="title">ここがペーMatsu Codeップです</h1>
<a href="#" class="page-top">
<div class="page-top__arrow"></div>
</a>
</main>.page-top {
display: flex;
justify-content: center;
align-items: center;
position: fixed;
right: 30px;
bottom: 30px;
width: 50px;
height: 50px;
background-color: #000066;
border-radius: 100%;
cursor: pointer;
z-index: 5;
opacity: 0;
visibility: hidden;
transform: translateY(50px);
transition: opacity 1s,visibility 1s, transform 1s;
}
.page-top.show {
opacity: 1;
visibility: visible;
transform: translateY(0px);
}$(window).on('load scroll', function(){
if($(this).scrollTop() > 1) {
$('.page-top').addClass('show');
}else{
$('.page-top').removeClass('show');
}
});$(window).on('load scroll', function(){
if($(this).scrollTop() > 1) {
$('.page-top').addClass('show');
}else{
$('.page-top').removeClass('show');
}
});「ページ読み込み後、もしくはスクロール時に、ウインドウのトップ位置が1pxより大きかったらshowクラスを付与。1pxより小さかったらshowクラスを外す」という意味。
つまり1pxでもスクロールしたらペーMatsu Codeップボタンが反映するってことですね。
このpx数値は、ご自身の案件でカスタマイズしてください！
px指定じゃなく、変数を代入してセクション部分にウインドウ位置が入ったらなどの指定もあり！
スクロールフェードインに関しては
下記記事を参考にどうぞ↓
【jQuery】スクロール時のフェードイン【サンプル・コピペコード付き】
【jQuery】ペーMatsu Codeップへ戻るボタン【スクロール途中から表示】：まとめ
- 読み込み時、スクロール時にif文イベントを発動
- 「指定pxよりスクロールされたらクラスを付与」などの指定をする
- クラスの付け外しによるcssアニメーションを実装
スクロール途中から表示される「ペーMatsu Codeップ位置へ戻るボタン」は
よく使うので覚えておこう！
下記に関連記事をまとめました↓
【jQuery】ペーMatsu Codeップへ戻るボタン【上スクロールで消えて、下スクロールで出てくる】
【jQuery】ペーMatsu Codeップへ戻るボタン【フッター手前で止まる】