

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

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

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

[code]

    $(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);
          });
    
    });
    
[/code]

[code]

      <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>
    
[/code]

[code]

    $(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);
          });
    
    //ここまでｽﾑｰｽｽｸﾛｰﾙ//
    
    });
[/code]

[code]

    @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;
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 4.0
2020-04-11T02:24:56.133
65529
2020-08-17T06:41:49.187
2020-04-13T23:41:36.833
22665
39581
question
jquery
ページ内ナビゲーションでスムーズスクロールで移動する時、一瞬移動先の画面が表示されその後スムーズスクロールされます。なぜ一瞬移動先の画面が表示されるのでしょうか？


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

[code]

    hoge.click(function(){
      ~省略~
      return false;
    });
    
[/code]


CC BY-SA 4.0
2020-08-17T06:41:49.187
69624
2020-08-17T06:41:49.187
41524
65529
answer