【スクロールアップ・ダウン・ボタンの作り方】
こちらからどうぞ。https://qiita.com/beerneko/items/c0fcf0a8c9b74d9b7db6 （書いてることはおなじです。）
いろいろと探してみて、一番スムーズにスクロールしてくれるスクロール・トゥ・トップ、そしてダウンのやり方をご紹介します。そのままコピペして使ってもしっかり動きます。
CSSの設定
position: fixed;
left: 0;
bottom: 85px;
display: none;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
.back-to-down {
position: fixed;
right: 0;
bottom: 85px;
display: none;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
「rotate(90deg)」で飛行機のアイコンが上向きに飛ぶようにしてます。
javascript（jQuery）
$(window).scroll(function () {
if ($(this).scrollTop() > 500) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
$('#back-to-top').click(function () {
$('body,html').animate({
scrollTop: 0
}, 400);
return false;
});
});
$(document).ready(function(){
$(window).scroll(function () {
if (($(this).scrollTop()+800) > $('#down').height()) {
$('#back-to-down').fadeOut();
} else {
$('#back-to-down').fadeIn();
}
});
$('#back-to-down').click(function () {
$('body,html').animate({
scrollTop: $('#down').height()
}, 400);
return false;
});
});
HTML
＜div class="container" id="down">
＜div class="container">
＜main role="main">
＜/main>
＜/div>
＜a id="back-to-top" href="#" class="btn btn-dark btn-sm back-to-top" role="button">Top
＜a id="back-to-down" href="#" class="btn btn-dark btn-sm back-to-down" role="button">Down
＜/div>
ここでは、最初の「class="container"」ですべて真ん中に持ってきて、次の「class="container"」でメインを真ん中にもってくる。そうするとメインの外側でボタンがついてくれるので、デバイスを選ばず表示してくれると思ってこうしてます。
まだまだCSSわかんないことばかりで大変。
初心者には初心者なりの疑問があります。「こんなこともわからないのか！」となる部分が往々にしてつまずく場所になったります。
実際にどう動くのかはこちらのサイトから「test」のアカウントで入って確認してみてください。
https://oboero3.azurewebsites.net/
