ページの上部にスルッと移動するJS

JavaScript/jQuery

2020.05.04

サイトをスクロールして、途中からページの下の方にページの上部に移動できるボタンを設置する。スルッと移動するjQueryです。

もくじです

jQueryを読み込む

jQueryのサイトからjQueryを読み込む設定を確認します。cdnというものです。
https://code.jquery.com/

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

cdnとは

cdnとは「コンテンツデリバリーネットワーク」のことを言います。
自分のサイトにファイルを設置せずに、他のサイトからファイルを読み込む状態になります。今回の場合は、jQueryのサイトからjQueryのファイルを読み込んでいる状態です。

コード

JavaScript

$(document).ready(function() {
 var page_top = $('#page_top');

 $(window).scroll(function () {
  if ($(this).scrollTop() > 100) {
  page_top.fadeIn();
  } else {
  page_top.fadeOut();
  }
 });

 page_top.click(function () {
  $('body, html').animate({ scrollTop: 0 }, 300);
  return false;
 });
});

解説

ここではページの上部に移動するボタン部分を#page_topとします。
ページを100px以上スクロールするとフェードインで#page_topが表示され、それ以外ではフェードアウトで#page_topが非表示になります。

そして、#page_topをクリックするとページの一番うえにスルッと移動します。

 var page_top = $('#page_top');

ボタンのIDを変更する場合は上記の#page_topを変更します。
Classで指定しても構いません。例えば、.scrolltopなどです。

  if ($(this).scrollTop() > 100) {

どのくらいスクロールするとボタンが表示されるかは、上記の100を変更します。

  $('body, html').animate({ scrollTop: 0 }, 300);

ページの上部に移動するスピードは上記の300を変更します。

サンプルhtml

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ページの上部にスルッと移動する</title>
<style>
#page_top{
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgb(51, 51, 51);
    color: rgb(255, 255, 255);
    padding: 5px 10px;
    cursor: pointer;
    display:none;
}
</style>
</head>
<body>

ページの内容が入ります。

<div id="page_top">
上に戻ります
</div>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script>
$(document).ready(function() {
 var page_top = $('#page_top');

 $(window).scroll(function () {
  if ($(this).scrollTop() > 100) {
  page_top.fadeIn();
  } else {
  page_top.fadeOut();
  }
 });

 page_top.click(function () {
  $('body, html').animate({ scrollTop: 0 }, 300);
  return false;
 });
});
</script>
</body>
</html>

サンプルHTMLを実際に確認

https://cowaza.jp/files/64.html

画面の縦サイズを短くして確認してください。

COWAZA