cssで画面の右下に「トップへ戻る」ボタンや画像を固定する方法/position:fixedの使い方

position:fixedの使い方はわかった。ヘッダーを上に固定することもできるし、top:0、left:0で左上に固定することもできる。しかし右下によくある「トップへ戻る」ボタン、レスポンシブで画像のサイズに依存せず常に右下にあるあれはどうやって配置しているのか？　という状態の方は、ちょっと頭が固いです。つまり僕のことですが。

ボタンを右下に固定する方法
ボタンを押すとトップへ移動

ボタンを右下に固定する方法

クイズの答は、bottomとrightで指定すればいいです。
position:fixedについては別記事でも書きましたが、これを書くことで要素が画面内に固定されます。

要素を決まった位置に固定
position:fixed;

position:fixedの下にtop:○○pxとかleft:○○pxとか記述することでどこに固定するかを指定できますが、今回は右下なので、次のように指定してみます。

.upper{
position:fixed;
right:50px;
bottom:50px;
transition:1s;
opacity:0.7;
}
.upper:hover{
opacity:1;
}

※transitionとopacity、hoverあたりはマウス乗せたときの挙動なので、本筋と関係ないです。
というわけで、右下にボタンが表示されているはずです。

ボタンを押すとトップへ移動

animateでその位置まで移動する処理になるので、jQueryの知識が必要です（プレーンなjavascriptでもできますが、jQueryのほうが簡単）。

jQueryでボタンを押すと目的の場所までスライドするリンクナビ（目次）を作る方法/offsetメソッドの使い方

目的の場所にリンクさせたいだけなら、要素にIDを付けておき、リンク先にID名を指定するだけで事足ります。しかしアニメーションしながらとなると、jQueryで「要素の高さ」を取得する必要が出てきます。

ただ、単純に一番上まで行きたいだけであればそんなに長くないです。コードとしては、たとえば以下のようになります。
クラスは.upperとしていますが、押す要素のidやclassに合わせて変更してください。またjQueryのバージョンは、できれば最新のものにしたほうがいいです。最後の500はミリ秒数なので、数字を増やせばかかる時間が変更されます。


<script src = “https://code.jquery.com/jquery-3.3.1.min.js”></script>
<script>$(".upper").click(function(){
$('html,body').animate({'scrollTop':0},500);
});</script>