javascript - jquery 平滑滚动不正确的结果

Question

我试着平滑滚动

但是滚动条没有像预期的那样工作它看起来像平滑滚动和默认跳转到 # work on same time

这是我的 HTML(引导导航)

<nav class="navbar fixed-top navbar-expand-sm navbar-light bg-light mb-3" id="main-nav">
      <div class="container">
        <a class="navbar-brand" href="#">Navbar</a>
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#welcome">Welcome</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#services">Services</a>
          </li>
        </ul>
      </div>
    </nav>

这是我的js

<script>
    $('body').scrollspy({ 
      target: '#main-nav',
      offset: $('#main-nav').outerHeight()
    });

    // add smooth scrolling
    $('#main-nav a').on('click',(event) => {
      const sender = event.target; // sender 
      // check for a hash value
      if (sender.hash)
      {
        // prevent default behaviour
        event.preventDefault();

        // get sendar hash
        const hash = sender.hash;
        const navHeight = $('#main-nav').outerHeight();

        // animate smooth scroll
        $('html').animate({
          scrollTop: $(hash).offset().top - (navHeight + 1),
        },1500,() => {
          // add hash to URL after scroll
          this.location.hash = hash;
        });
      }
    });
  </script>

和页面内容

<section id="welcome">
    <h3>Welcome</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
    </p>
</section>
<section id="about">
    <h3>About</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
    </p>
</section>
<section id="services">
    <h3>Services</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
    </p>
</section>

当我第一次点击 nav 上的链接时，它会在内容标题上滚动导航栏(使我的标题消失)

但是当我再次点击同一个链接时，它会向上滚动一点并显示为我的预期结果

所以。任何人都知道如何解决此问题以使滚动在第一次单击时正确工作

谢谢。

Answer 1

这是您更改后的代码，将 padding-top:52px; 添加到 section 元素并从中删除 - (navHeight + 1) $(hash).offset().top。

$('body').scrollspy({ 
      target: '#main-nav',
      offset: $('#main-nav').outerHeight()
    });

    // add smooth scrolling
    $('#main-nav a').on('click',(event) => {
      const sender = event.target; // sender 
      // check for a hash value
      if (sender.hash)
      {
        // prevent default behaviour
        event.preventDefault();

        // get sendar hash
        const hash = sender.hash;
        const navHeight = $('#main-nav').outerHeight();

        // animate smooth scroll
        $('html').animate({
          scrollTop: $(hash).offset().top,
        },1500,() => {
          // add hash to URL after scroll
          this.location.hash = hash;
        });
      }
    });

section{
  min-height:500px;
  padding-top:52px;
}
#main-nav{
  position:fixed;
  width:100%;
  top:0px;
  background:#ffffff;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav class="navbar fixed-top navbar-expand-sm navbar-light bg-light mb-3" id="main-nav">
      <div class="container">
        <a class="navbar-brand" href="#">Navbar</a>
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="#welcome">Welcome</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#services">Services</a>
          </li>
        </ul>
      </div>
    </nav>
    
    <section id="welcome">
    <h3>Welcome</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
    </p>
</section>
<section id="about">
    <h3>About</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
    </p>
</section>
<section id="services">
    <h3>Services</h3>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta eaque similique cupiditate! Pariatur, aliquid quae recusandae quidem atque cumque perspiciatis possimus quod repudiandae, labore nobis eius voluptatum! Impedit, sint in.
    </p>
</section>