@ PHP

Go to top:ページの先頭に戻る

ページをスクロールすると「ページの先頭に戻るボタン」が表示され、クリックするとページの先頭にスムーススクロールするソースコードです。

gototop.html

<!DOCTYPE html>
<html lang="ja">

<head>
<meta charset="utf-8">
<title>sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.backtotop {
  position: fixed;
  z-index: 9000;
  right: 15px;
  bottom: 50px;
  display: none;
  text-align: center;
}
.backtotop a {
  font-size: 1.38rem;
  font-weight: bold;
  line-height: 1.5;
  display: block;
  margin: 0;
  padding: 14px 20px;
  text-decoration: none;
  opacity: .2;
  color: white;
  border-radius: 5px;
  background-color: #040404;
  filter: alpha(opacity=20);
  -moz-opacity: .2;
}
.backtotop a:hover {
  color: #787878;
}
main {
  height: 1500px;
}
</style>
</head>

<body>
<div style="display: block;" class="backtotop">
  <a href="header">
    <i class="fa fa-chevron-up" aria-hidden="true"></i>
  </a>
</div>
<main></main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function() {
  var topBtn = $('.backtotop');
  topBtn.hide();
  $(window).scroll(function() {
    // 要素の現在のスクロール上の上位置を取得し処理を分岐
    if ($(this).scrollTop() > 300) {
      topBtn.fadeIn();
    } else {
      topBtn.fadeOut();
    }
  });
  topBtn.click(function() {
    // html,body 両方を指定してスクロールイベントを設定。
    $('body,html').animate({
      scrollTop: 0
    }, 500);
    return false;
  });
});
</script>
</body>

</html>

demo

「iPhoneで従来のブラウザ判定ではスクロールが上手く動作しない」場合の対処方法はこちら