jQueryでのページ内リンクにて、ボタンを押した際に一瞬移動先が表示されてから移動を開始する現象

前提・実現したいこと

現在、ポートフォリオサイト(自己紹介ページ)を作成しており、デスクトップのVisual Studio CodeでHTML、CSS、jQueryを使用して開発を進めています。

発生している問題・エラーメッセージ

jQueryを用いて、固定ヘッダー内のメニュー(About, Skills, Projects, Contacts)を押すと、ページ内の該当箇所になめらかに移動する、という機能を実装させたいのですが、メニューを押して移動を開始する際に、一瞬移動先の位置へ移ってから、元々の位置に戻って移動を開始する、という現象が起きています。

レスポンシブ対応にしているため、通常の固定ヘッダーに加えて、スマホサイズ用にハンバーガーメニューを設定しているのですが、こちらも同様でした。

一旦移動を開始してからは全く問題なく、結果的に正しい位置に移動出来ています。しかしながらメニューを押した際に上記のように一瞬画面が切り替わるため、違和感があります。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1">
6  <title>Portfolio</title>
7  <script src="省略" crossorigin="anonymous"></script> <!-- font awesomeの読み込み -->
8  <link rel="stylesheet" href="css/stylesheet.css">
9  <link rel="stylesheet" href="css/responsive.css">
10  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
11</head>
12
13<body>
14<header>
15  <div class="nav-wrapper">  <!-- 固定ヘッダー -->
16    <ul>
17      <li><a class="menu-item" href="#about">About</a></li>
18      <li><a class="menu-item" href="#skills">Skills</a></li>
19      <li><a class="menu-item" href="#projects">Projects</a></li>
20      <li><a class="menu-item" href="#contact">Contact</a></li>
21    </ul>
22  </div>
23
24  <div class="toggle-wrapper">  <!-- ハンバーガーメニュー(スマホサイズ用) -->
25    <a class="menu-toggle"><i class="fas fa-bars fa-lg"></i></a>
26    </div>
27    <div id="sidebar-wrapper">
28      <ul class="sidebar-nav">
29        <li class="sidebar-nav-item"><a class="js-scroll-trigger menu-item" href="#about">About</a></li>
30        <li class="sidebar-nav-item"><a class="js-scroll-trigger menu-item" href="#skills">Skills</a></li>
31        <li class="sidebar-nav-item"><a class="js-scroll-trigger menu-item" href="#projects">Projects</a></li>
32        <li class="sidebar-nav-item"><a class="js-scroll-trigger menu-item" href="#contact">Contanct</a></li>
33      </ul>
34    </div>
35  </div>
36<header>
37
38<section id="about">省略</section>
39<section id="skills">省略</section>
40<section id="projects">省略</section>
41<section id="contact">省略</section>
42<footer>省略</footer>
43
44<script src="js/script.js"></script>
45</body>
46</html>

jQuery
1  $('.menu-item').click(function() {
2    var id = $(this).attr('href');
3    var position = $(id).offset().top - 30; // 固定ヘッダの高さ30px分を調整
4    $('html, body').animate( {'scrollTop':position}, 500);
5  });

試したこと

試したブラウザはChromeやEdgeです。どちらも同じ結果でした。固定ヘッダにしていることが原因かと思いましたが、固定ヘッダを解除して試しても同様でした。

行動規範の内容に同意します

回答1件

ベストアンサー

js
1  $('.menu-item').click(function() {
2    var id = $(this).attr('href');
3    var position = $(id).offset().top - 30; // 固定ヘッダの高さ30px分を調整
4    $('html, body').animate( {'scrollTop':position}, 500);
5    return false; // ADD
6  });