<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
</head>
<body>
<div id="container">ページトップ</div>
<div id="sub-container">上から600pxまできたところで矢印が表示されます。
</div>
<div id="text-container">右端に表示されている矢印を文章に重ねてご覧ください。矢印が透過されているので、文字が重なっても大丈夫です。右端に表示されている矢印を文章に重ねてご覧ください。右端に表示されている矢印を文章に重ねてご覧ください。右端に表示されている矢印を文章に重ねてご覧ください。右端に表示されている矢印を文章に重ねてご覧ください。</div>
<div id="last-container">ページの終わり</div>
<div class="gotop">
<a class="js-gotop"><i class="fas fa-arrow-up"></i></a>
</div>
</body>
</html>.gotop {
position: fixed;
display:none;
right: 16px;
bottom: 16px;
z-index: 9999;
}
.gotop a {
width: 32px;
height: 32px;
line-height: 32px;
padding: 6px;
display: block;
cursor: pointer;
text-align: center;
background: rgba(0, 0, 0, 0.5);
color: #fff;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
-ms-border-radius: 30px;
border-radius: 30px; }
.gotop a:hover, .gotop a:active, .gotop a:focus {
opacity: 0.85;
-webkit-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s; }
#container{
height:600px;
margin:0;
padding:0;
}
#sub-container{
height:1200px;
margin:0;
padding:0;
}
#text-container{
height:200px;
margin:0;
padding:0;
}
#last-container{
margin:0;
padding:0;
}$(function(){
// ①スクロールした時に、矢印を表示/非表示させる処理
$(window).scroll(
function(){
// ①-1 ページ最初からスクロールした位置を取得
var pos = $(window).scrollTop();
if(pos > 600){
// ①-2 ページの一番上から600px以上スクロールしたら、.gototopの要素をゆっくり表示する
$('.gotop').fadeIn('slow');
}else{
// ①-3 それ以外のとき、.gototopの要素をゆっくり非表示にする
$('.gotop').fadeOut('slow');
}
});
// ②矢印のリンクボタンをクリックしたら上に戻る処理
$('.js-gotop').click(function(){
// ページトップへ移動する
$('body,html').animate({
scrollTop: 0
}, 500);
});
});
External CSS
This Pen doesn't use any external CSS resources.