JSでページトップに戻るを実装- Kazuma-work

動きを実現する仕組み

JSでページトップに戻るを実装。

STEP1　HTMLコード

①　head終了タグ直前に自作のCSSを読み込みます。＊wordpressでfunctionにて設定の場合は省略

<head>

<link rel="stylesheet" type="text/css" href="css/5-1-14.css">

</head>

②　body内にリンク元のHTMLとリンク先のHTMLを記載します。

<body>

  <header class="header">
    
      <div class="header_inner">
        
        <div class="bland_logo">
          <a href="#"
            >LOGO</a>
        </div>

        <div class="openbtn">
          <span></span>
          <span></span>
          <span></span>
        </div>

        <nav id="g-nav">
          <div id="g-nav-list">
            <!--ナビの数が増えた場合縦スクロールするためのdiv※不要なら削除-->
            <ul>
              <li><a href="#">Top</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Service</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </div>
        </nav>
        
      </div>
    
    </header>

　<main>

　　　<section class="scroll-point" id="area-1">
　　　　　<h2>Area 1</h2>
　　　　　<p>内容が入ります。</p>
　　　<!--/area1--></section>

　　　<section class="scroll-point" id="area-2">
　　　　　<h2>Area 2</h2>
　　　　　<p>内容が入ります。</p>
　　　<!--/area2--></section>

　　　<section class="scroll-point" id="area-3">
　　　　　<h2>Area 3</h2>
　　　　　<p>内容が入ります。</p>
　　　<!--/area3--></section>

　　　<section class="scroll-point" id="area-4">
　　　　　<h2>Area 4</h2>
　　　　　<p>内容が入ります。</p>
　　　<!--/area4--></section>

　<!--/main--></main>

　<footer id="footer">

   <div id="pageTopIcon">
      <button id="scrollToTopBtn">
        <span>▲</span><span class="scroll-text">トップ</span>
      </button>
    </div>

　　<small>© copyright.</small> 
　</footer>

</body>

③　body 終了タグ直前に JS、動きを制御する自作のJS の2 つを読み込みます。＊wordpressでfunctionにて設定の場合は省略


　　<!--自作のJS-->
　　<script src="js/5-1-14.js"></script>
</body>

④　WordpressでのfunctionでのCDNとファイルの読み込みは下記より。

//CSSとJSの読み込み
function my_enqueue_scripts()
{
  $version = wp_get_theme()->get( 'Version' );
  wp_enqueue_style('index-style', get_template_directory_uri() . '/css/index.css', array(), $version);
  wp_enqueue_style('singular-style', get_template_directory_uri() . '/css/singular.css', array(), $version);
  wp_enqueue_style('content-style', get_template_directory_uri() . '/css/content.css', array(), $version);
  wp_enqueue_style('archive-style', get_template_directory_uri() . '/css/archive.css', array(), $version);
  wp_enqueue_style('comments-style', get_template_directory_uri() . '/css/comments.css', array(), $version);
  wp_enqueue_style('404-style', get_template_directory_uri() . '/css/404.css', array(), $version);
  wp_enqueue_style('search-form-style', get_template_directory_uri() . '/css/searchform.css', array(), $version);
  wp_enqueue_style('search-style', get_template_directory_uri() . '/css/search.css', array(), $version);
  wp_enqueue_style('sidebar-style', get_template_directory_uri() . '/css/sidebar.css', array(), $version);
  wp_enqueue_style('header-style', get_template_directory_uri() . '/css/header.css', array(), $version);
  wp_enqueue_style('footer-style', get_template_directory_uri() . '/css/footer.css', array(), $version);
  wp_enqueue_style('navi-style', get_template_directory_uri() . '/css/navi.css', array(), $version);
  wp_enqueue_style('navi-accordion-style', get_template_directory_uri() . '/css/navi-accordion.css', array(), $version);
  wp_enqueue_style('catego-navi-style', get_template_directory_uri() . '/css/catego-navi.css', array(), $version);
  wp_enqueue_style('button-style', get_template_directory_uri() . '/css/button.css', array(), $version);
  wp_enqueue_script('navi-script', get_template_directory_uri() . '/js/navi.js', array('jquery'), $version, true);
  wp_enqueue_script('catego-navi-script', get_template_directory_uri() . '/js/catego-navi.js', array('jquery'), $version, true);
  wp_enqueue_script('page-top-script', get_template_directory_uri() . '/js/page-top.js', array('jquery'), $version, true);
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');

⑤　header.phpの>head>内で下記を使って読み込み。

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"><!--スタイルシートの呼び出し-->
<?php wp_head(); ?><!--システム・プラグイン用-->

CSSでコーディング

STEP2　cssコード

/* ページトップアイコン用CSS */
#pageTopIcon {
  position: fixed;
  right: 20px;
  bottom: 40px;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
#pageTopIcon.show {
  opacity: 1;
  pointer-events: auto;
}
#scrollToTopBtn {
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  border: none;
  width: 66px;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s;
  flex-direction: column;
}
#scrollToTopBtn:hover {
  background: #f0f0f0;
}
#scrollToTopBtn span {
  font-size: 2em;
  color: #333;
}
#scrollToTopBtn span.scroll-text {
  display: block;
  font-size: 0.8em;
  color: #333;
}

JSを使ってJSコード作成

STEP3　JSコード

// ページトップアイコンの表示・クリック処理（アニメーション付き）
document.addEventListener("DOMContentLoaded", function () {
  const icon = document.getElementById("pageTopIcon");
  const btn = document.getElementById("scrollToTopBtn");

  // 初期状態
  icon.style.opacity = 0;
  icon.style.pointerEvents = "none";
  icon.style.display = "block"; // CSSでdisplay:noneの場合も考慮

  let visible = false;

  window.addEventListener("scroll", function () {
    if (window.scrollY > 200) {
      if (!visible) {
        icon.style.transition = "opacity 0.4s";
        icon.style.opacity = 1;
        icon.style.pointerEvents = "auto";
        visible = true;
      }
    } else {
      if (visible) {
        icon.style.transition = "opacity 0.4s";
        icon.style.opacity = 0;
        icon.style.pointerEvents = "none";
        visible = false;
      }
    }
  });

  btn.addEventListener("click", function () {
    window.scrollTo({ top: 0, behavior: "smooth" });
  });
});

動作確認は下記から

See the Pen Untitled by K O (@K-O-the-builder) on CodePen.