0

ぺージ内ナビゲーションでスムーズスクロールで移動する時、一瞬移動先の画面が表示されその後スムーズスクロールされます。なぜ一瞬移動先の画面が表示されるのでしょうか?

HTMLで、aタグにhref属性の飛び先のid名を指定しておきます。そしてクリックしたときにattrメソッドでhref属性の値を取得し、offsetメソッドでその要素の位置を取得しページ内でスムーズスクロールしています。

確実にスクロールしているのでコード自体に問題は無いと思いますが、一瞬移動先の画面が表示されるのが気になります。直し方を教えてください。

$(function () {

  var $section = $('.nav-list').find('.list-item a');

    $section.click(function(){
      var id = $(this).attr('href');

      var position = $(id).offset().top;
      $('html,body').animate({
        'scrollTop':position - 50
      },1500);
    });

  var $sectionSticky = $('.sticky-header-nav-list').find('.sticky-header-list-item a');

    $sectionSticky.click(function(){
        var id = $(this).attr('href');

        var position = $(id).offset().top;
        $('html,body').animate({
          'scrollTop':position - 50
        },1500);
      });

});
  <header class="header">
    <h1 class="title">xxx</h1>
    <nav class="header-nav">
      <ul class="nav-list">
        <li class="list-item"><a href="#profile">プロフィール</a></li>
        <li class="list-item"><a href="#skill">スキル</a></li>
      </ul>
    </nav>
  </header>
  <div class="clearfix">
      <section 1 class="profile" id="profile">
        <div class="heading-box">
          <h1 class="heading">プロフィール<span></span></h1>
        </div>
        <div class="profile-box">
          <div class="profile-contents">
            <div class="profile-img-box">
              <img class="profile-img" src="./img/IMG_0728.jpg" alt="profile.img">
              <p>xxx</p>
            </div>
          </div>
      </section 1>
      <section 2 class="skill" id="skill">
        <div class="heading-box">
          <h1 class="heading">スキル<span></span></h1>
        </div>
      </section 2>
    </div>

$(function () {
//ここからスムーススクロール//

  var $section = $('.nav-list').find('.list-item a');

    $section.click(function(){
      var id = $(this).attr('href');

      var position = $(id).offset().top;
      $('html,body').animate({
        'scrollTop':position - 50
      },1500);
    });

  var $sectionSticky = $('.sticky-header-nav-list').find('.sticky-header-list-item a');

    $sectionSticky.click(function(){
        var id = $(this).attr('href');

        var position = $(id).offset().top;
        $('html,body').animate({
          'scrollTop':position - 50
        },1500);
      });

//ここまでスムーススクロール//

});
@charset "UTF-8";
body{
  box-sizing: border-box;
  width: 100%;
  font-size: 2px;
  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}
.header{
  display: block;
  width: 100%;
  background-color:#8EB8FF;
  padding-top:20px;
  overflow: hidden;
}
header *{
  color:#808080;
}
.title{
  font-size: 1.8rem;
  text-align: center;
}
.header-nav{
  display: block;
  width: 650px;
  margin: 0 auto;
}
.nav-list{
  display: inline-block;
}
.list-item{
  float: left;
  padding:30px;
  font-size: 1.1rem;
}
.list-item a{
  display:block;
  width: 135%;
  text-align: center;
}
.list-item a::after{
  content: '';
  display: block;
  width: 0;
  border-bottom: 1px solid #000;
  margin: 0 auto;
  transition: width 0.3s ease-in-out;
}
.list-item a:hover::after{
  width: 100%;
}
.clearfix::after{
  content: '';
  display: block;
  clear: both;
}
.heading-box{
  display: block;
  text-align: center;
}
.heading{
  display:inline-block;
  font-size: 1.7rem;
  font-family: BIZ UDP明朝;
  font-weight: normal;
  text-align: center;
  padding: 50px 20px;
  overflow: hidden;
}
.heading span{
  background: url(../img/underline.png);
  background-size: 100% 100%;
  background-position:center;
  display:inline-block;
  height: 20px;
  width: 120%;
  position: relative;
  left: -210px;
}
.profile{
  display: block;
  height: auto;
  margin: 0 220px;
  padding-bottom: 100px;
}
.profile-contents{
  display: inline-block;
  padding-left: 90px;
}
.profile-box{
  display: block;
  width: 85%;
  height: auto;
  margin: 0 auto;
}
.profile-img-box{
  display: inline-block;
  float: left;
  text-align: center;
}
.profile-img{
  display: inline-block;
  width: 60%;
  border-radius: 10px;
}
.profile-img-box p{
  text-align: center;
  font-size: 1rem;
  margin-top: 10px;
}
.skill{
  display: block;
  height: auto;
  padding: 50px 0 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html class="no-js" lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<title>notitle</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/main.css">
<link href="https://use.fontawesome.com/releases/v5.12.0/css/all.css" rel="stylesheet">
</head>
<body>
<header class="header">
<h1 class="title">xxx</h1>
<nav class="header-nav">
  <ul class="nav-list">
    <li class="list-item"><a href="#profile">プロフィール</a></li>
    <li class="list-item"><a href="#skill">スキル</a></li>
  </ul>
</nav>
</header>
<div class="clearfix">
  <section 1 class="profile" id="profile">
    <div class="heading-box">
      <h1 class="heading">プロフィール<span></span></h1>
    </div>
    <div class="profile-box">
      <div class="profile-contents">
        <div class="profile-img-box">
          <img class="profile-img" src="./img/IMG_0728.jpg" alt="profile.img">
          <p>xxx</p>
        </div>
      </div>
  </section 1>
  <section 2 class="skill" id="skill">
    <div class="heading-box">
      <h1 class="heading">スキル<span></span></h1>
    </div>
  </section 2>
</div>
<script src="./js/vendor/modernizr.custom.min.js"></script>
<script src="./js/vendor/jquery-1.10.2.min.js"></script>
<script src="./js/vendor/jquery.ba-throttle-debounce.min.js"></script>
<script src="./js/vendor/jquery.smooth-scroll.js"></script>
<script src="./js/main.js"></script>
</body>
</html>

4
  • 問題を再現するための HTML を追記していただけませんか?
    – supa
    Commented 2020年4月11日 2:29
  • 私の環境だと現象が確認できませんでした。具体的にどのようなOSブラウザで確認できますか?また別の環境だと同様の現象は発生しますか?
    – keitaro_so
    Commented 2020年4月13日 1:29
  • 返答ありがとうございます。OSはwindows。ブラウザはchromeです。他のブラウザ(explorerやedge)でも同じ症状がでる状態です。エディタはATOMです。ローカル環境(HTMLファイルをブラウザで表示させているだけ)です。印象的には一瞬jQueryが遅れて実行される感じなんですが・・・。
    – tima0314
    Commented 2020年4月13日 12:36
  • 私も同じ環境ですが、質問文にあるスニペットを実行して、ヘッダーの「スキル」をクリックしたらスムーズにスクロールしているようで、「一瞬だけ移動先のページ」の表示はされないようです。何かローカルと違い(ソースやjQueryのバージョン等)はありますか?あれば質問文を修正してみてください。
    – keitaro_so
    Commented 2020年4月13日 23:44

1 件の回答 1

1

一瞬移動先の画面が表示されるのは、aタグの通常動作が発動しているからではないでしょうか?
クリックイベントの最後にreturn false;を記述することで通常の動作を無効にできます。

hoge.click(function(){
  ~省略~
  return false;
});

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。