jQuery平滑滚动bug双击等

Question

现在我正在做一个咨询网站，我正在为此使用 Bootstrap，该网站只包含一个页面，为了更实用，我在导航栏固定顶部放置了一些按钮，目的是什么时候你点击按钮，页面滚动到主题，但我有一个问题，当我点击两次时它似乎有一个错误，当我在一个特定的主题并且我想改变点击另一个按钮时，页面滚动错误，例如高出几个像素 (?????)。我真的不知道发生了什么，我尝试了所有 js 来修复但没有任何帮助。

这是我的代码:

$(document).ready(function() {
  setBindings();
});

function setBindings() {
  $("nav a").click(function(e) {
    //e.preventDefault();
    e.preventDefault();
    var sectionID = "conteudo-" + e.currentTarget.id;
    $("html body").animate({
      scrollTop: $("#" + sectionID).offset().top
    }, 1000)
  })
}

html,
body,
.capa {
  height: 100%;
  overflow: auto;
  width: 100%;
}

body {
  background-attachment: fixed;
  font-family: Helvetica, Arial, sans-serif;
  overflow-x: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-fixed-top navbar-inverse navbar-transparente ">
  <div class="container">

    <!-- header -->
    <div class="navbar-header">

      <!-- botao toggle -->
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#barra-navegacao">
            <span class="sr-only">alternar navegação</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

      <a href="#conteudo-sobre" class="js-scroll-trigger">
        <img src="logopng.png" width="100" height="30" style="margin-top: 10px">
      </a>
      
    </div>

    <!-- navbar -->
    <div class="collapse navbar-collapse" id="barra-navegacao">
      <ul class="nav navbar-nav navbar-right">
        <li><a id="home" href="#conteudo-home">Home</a></li>
        <li><a id="sobre" href="#conteudo-sobre">Sobre</a></li>
        <li><a id="servicos" href="#conteudo-servicos">Serviços</a></li>
        <li><a id="contato" href="#conteudo-contato">Contato</a></li>
        <li class="divisor" role="separator"></li>
        <li><a id="msc" href="#conteudo-contato">Mande seu currículo</a></li>
      </ul>
    </div>
  </div>
  <!-- /container -->
</nav>
<!-- /nav -->

<div class="capa " id="conteudo-home">
  <div class="texto-capa layer">
    <img src="logopng.png" width="450" height="150">
    <h4>
      <hr align="center" width="100" size="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae pha</h4>
    <a href="#conteudo-sobre" class="btn btn-custom btn-branco btn-lg">Saiba mais</a>
  </div>
</div>


<section id="conteudo-sobre">
  <div class="container">

  <div class="row text-center">
    <div  style="border:1px solid red">
      <h2>Sobre nós<hr align="center" width="70%" size="1"></h2>
      <h3>Lorem ipsum </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae pharetra mi. Quisque sit amet mattis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nibh felis, ultricies vitae nisi in, euismod accumsan diam. Proin congue tempor pharetra. Vestibulum gravida sed velit non efficitur. Vivamus blandit, neque id dignissim ultrices, sapien augue vestibulum velit, a sollicitudin justo dolor ut elit. Donec ultricies euismod mi, id venenatis justo porttitor vitae. Duis elit nisi, faucibus eu velit non, suscipit pellentesque lacus.</p>
      <h3>Lorem ipsum </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae pharetra mi. Quisque sit amet mattis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nibh felis, ultricies vitae nisi in, euismod accumsan diam. Proin congue tempor pharetra. Vestibulum gravida sed velit non efficitur. Vivamus blandit, neque id dignissim ultrices, sapien augue vestibulum velit, a sollicitudin justo dolor ut elit. Donec ultricies euismod mi, id venenatis justo porttitor vitae. Duis elit nisi, faucibus eu velit non, suscipit pellentesque lacus.</p>


    </div>

     
  </div>


</section>

<section id="conteudo-servicos">
  <div class="container">

  <div class="row text-center">
    <div  style="border:1px solid red">
      <h2>Serviços<hr align="center" width="70%" size="1"></h2>
      <h3>Lorem ipsum </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae pharetra mi. Quisque sit amet mattis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nibh felis, ultricies vitae nisi in, euismod accumsan diam. Proin congue tempor pharetra. Vestibulum gravida sed velit non efficitur. Vivamus blandit, neque id dignissim ultrices, sapien augue vestibulum velit, a sollicitudin justo dolor ut elit. Donec ultricies euismod mi, id venenatis justo porttitor vitae. Duis elit nisi, faucibus eu velit non, suscipit pellentesque lacus.</p>
      <h3>Lorem ipsum </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae pharetra mi. Quisque sit amet mattis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nibh felis, ultricies vitae nisi in, euismod accumsan diam. Proin congue tempor pharetra. Vestibulum gravida sed velit non efficitur. Vivamus blandit, neque id dignissim ultrices, sapien augue vestibulum velit, a sollicitudin justo dolor ut elit. Donec ultricies euismod mi, id venenatis justo porttitor vitae. Duis elit nisi, faucibus eu velit non, suscipit pellentesque lacus.</p>


    </div>

     
  </div>


</section>

 <section id="conteudo-contato" >
 <div class="container">

  <div class="row text-center">
    <div  style="border:1px solid red">
      <h2>Serviços<hr align="center" width="70%" size="1"></h2>
      <h3>Lorem ipsum </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae pharetra mi. Quisque sit amet mattis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nibh felis, ultricies vitae nisi in, euismod accumsan diam. Proin congue tempor pharetra. Vestibulum gravida sed velit non efficitur. Vivamus blandit, neque id dignissim ultrices, sapien augue vestibulum velit, a sollicitudin justo dolor ut elit. Donec ultricies euismod mi, id venenatis justo porttitor vitae. Duis elit nisi, faucibus eu velit non, suscipit pellentesque lacus.</p>
      <h3>Lorem ipsum </h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae pharetra mi. Quisque sit amet mattis justo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed nibh felis, ultricies vitae nisi in, euismod accumsan diam. Proin congue tempor pharetra. Vestibulum gravida sed velit non efficitur. Vivamus blandit, neque id dignissim ultrices, sapien augue vestibulum velit, a sollicitudin justo dolor ut elit. Donec ultricies euismod mi, id venenatis justo porttitor vitae. Duis elit nisi, faucibus eu velit non, suscipit pellentesque lacus.</p>

</div>
</div>


     
        
      
</section>

Answer 1

非常有趣的行为...我花了一段时间才弄清楚，但罪魁祸首是 css。.删除 css，你给它设置 100% 的高度和宽度，它工作正常。

     <style>
         body {
          background-attachment: fixed;
          font-family: Helvetica, Arial, sans-serif;
          overflow-x: hidden;
        }          

     </style>
    $(document).ready(function() {
    $("nav").find("a").click(function(e) {
        e.preventDefault();
        var section = $(this).attr("href");
        $('html, body').animate({
              scrollTop: $(section).offset().top
           }, 2000);
    });

});