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

Question

我正在尝试平滑滚动

但是滚动条不能按预期工作，结果看起来平滑滚动，默认跳转到#同时工作

这是我的 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时，它会在内容标题上滚动导航栏（使我的标题消失）

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

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

谢谢你。

标签： javascriptjqueryhtmlcssbootstrap-4

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>