jQueryスムーズスクロールバグダブルクリックその他

Question

今日私はコンサルタントのためにウェブサイトを作っていますが、私はそのためにブートストラップを使用しています。ウェブサイトには1ページしか含まれていません。トップとその目的は、ボタンをクリックすると、トピックへのページのスクロールですが、問題があります。クリックすると、バグがあるように見えます。特定のトピックに入っていて、別のボタンをクリックして変更するには、ページのスクロールが間違っているように、数ピクセル高い（?????）のようにします。私は本当に何が起こっているのか分からず、私はすべての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); 
    }); 

});