固定されたnavbarとアンカーが固定されているブートストラップ

私が作っているブートストラップサイトに問題があります。クリックすると、コンテンツへのアンカーがトップナビゲーションバーの下に隠されています。私はこの問題を抱えている他の人について読んだことがあり、自分の解決策を作成するのに何時間も費やしてきました。私はちょうどレイアウトを台無しにエントリークラスの固定されたnavbarとアンカーが固定されているブートストラップ

padding-top:70px; margin-top:-70px;

修正を試してみましたJsfiddle

：ここ

は、ハイパーリンクglyphiconsをクリックすると、問題を示して、私は、アップロードサイトの例です。私が思っていた効果を最大限に引き出したが、最終的には上のほうが70ピクセル高く、結局のところサイズが大きかったクリックするとナビゲーションバーの下にスクロールされないアンカーです

また、正しくフォーマットされたアンカーのクリックが検出されたときに、自動的に70ピクセル下にスクロールするようにjavascript/jqueryを修正しようとしましたが、少し動きました。（site.com/#div）、しかし私は修正する方法を知らなかったリフレッシュによってページをリロードする際に問題がありました。私はCSSを使ってこれを解決したいと思っています.JSを有効にしている人に頼ることなくそれを行う方法があるはずです。私が何をしたいのですか（右）

出典

2017-01-05 user7377154

質問をより明確に説明できますか？ –

@Nailaグリフコンリンク（この例では、各ボックスの右下にある青色のリンクアイコン）をクリックすると、リンクされたdivの上端がナビゲーションバーの下に隠れるようにスクロールします。 – user7377154

このコードで試すことができますか？アンカータグをクリックすると、アンカータグがデフォルトの動作をします.jQueryを使用する必要がある場合は、ページの先頭に移動します。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
    <style> 
 
.hoverlist :hover { 
 
\t background-color: #f5f5f5; 
 
} 
 
.name h3 { 
 
\t text-align: center 
 
} 
 
body { 
 
\t margin-top: 70px; 
 
} 
 
.entries { 
 
} 
 
</style> 
 
    <script> 
 
    \t $(function(){ 
 
\t \t $('.date').on('click','a',function(e){ 
 
\t \t \t e.preventDefault(); 
 
\t \t var section = this.href; 
 
\t \t var sectionClean = section.substring(section.indexOf("#")); 
 
\t \t $("html, body").animate({ 
 
\t \t \t scrollTop: $(sectionClean).offset().top - 70 
 
\t \t }, 1000, function() { 
 
\t \t \t //window.location.hash = sectionClean; 
 
\t \t }); 
 
\t \t }); 
 
\t }); 
 
    </script> 
 
    </head> 
 
    <body> 
 
<nav class="navbar navbar-default navbar-fixed-top"> 
 
    <div class="container"> <a class="navbar-brand" href="index.html">Sitename</a> </div> 
 
    </nav> 
 
    
 
<div class="container"> 
 
<ul class="list-group hoverlist"> 
 
    <li id="1" class="list-group-item entries"> 
 
    <div class="name"> 
 
     <h3>jfklsdfjasklsjdlkasdjflkasfjkl</h3> 
 
     </div> 
 
    <div class="ids"> 
 
     <h4>fhdsjkafhsdkjfsdf</h4> 
 
     f23f2f, <a href="#">hjsdfkhfjksdfsdklfkaf</a>, fdjsklfsd</div> 
 
    <div class="reason"> 
 
     <h4>fasdjkfasf</h4> 
 
     fsdjklasdjl;fkfjalkfdjfkadfjajsdkfjsalksjadlfksadjlksdfsdffasfsaf</div> 
 
    <div class="date"> 
 
     <h4>sdfasdfsf</h4> 
 
     fasdfsf<a href="#1"><span class="glyphicon glyphicon-link pull-right"></span></a></div> 
 
    </li> 
 
    <li id="2" class="list-group-item entries"> 
 
    <div class="name"> 
 
     <h3>jfklsdfjasklsjdlkasdjflkasfjkl</h3> 
 
     </div> 
 
    <div class="ids"> 
 
     <h4>fhdsjkafhsdkjfsdf</h4> 
 
     fjasdklfjasdkfasd, jfkdl239fj23f2f, <a href="#">hjsdfkhfjksdfsdklfkaf</a>, fdjsklfsd</div> 
 
    <div class="reason"> 
 
     <h4>fasdjkfasf</h4> 
 
     fsdjklasdjl;fkfjalkfdjfkadfjajsdkfjsalksjadlfksadjlksdjkasdjsdkffjdslakfsdfasdfasdsadfsdffasfsaf</div> 
 
    <div class="date"> 
 
     <h4>sdfasdfsf</h4> 
 
     fasdfsf<a href="#2"><span class="glyphicon glyphicon-link pull-right"></span></a></div> 
 
    </li> 
 
    <li id="3" class="list-group-item entries"> 
 
    <div class="name"> 
 
     <h3>jfklsdfjasklsjdlkasdjflkasfjkl</h3> 
 
     </div> 
 
    <div class="ids"> 
 
     <h4>fhdsjkafhsdkjfsdf</h4> 
 
     fjasdklfjasdkfasd, jfkdl239fj23f2f, <a href="#">hjsdfkhfjksdfsdklfkaf</a>, fdjsklfsd</div> 
 
    <div class="reason"> 
 
     <h4>fasdjkfasf</h4> 
 
     fsdjklasdjl;fkfjalkfdjfkadfjajsdkfjsalksjadlfksadjlksdjkasdjsdkffjdslakfsdfasdfasdsadfsdffasfsaf</div> 
 
    <div class="date"> 
 
     <h4>sdfasdfsf</h4> 
 
     fasdfsf<a href="#3"><span class="glyphicon glyphicon-link pull-right"></span></a></div> 
 
    </li> 
 
    <li id="4" class="list-group-item entries"> 
 
    <div class="name"> 
 
     <h3>jfklsdfjasklsjdlkasdjflkasfjkl</h3> 
 
     </div> 
 
    <div class="ids"> 
 
     <h4>fhdsjkafhsdkjfsdf</h4> 
 
     fjasdklfjasdkfasd, jfkdl239fj23f2f, <a href="#">hjsdfkhfjksdfsdklfkaf</a>, fdjsklfsd</div> 
 
    <div class="reason"> 
 
     <h4>fasdjkfasf</h4> 
 
     fsdjklasdjl;fkfjalkfdjfkadfjajsdkfjsalksjadlfksadjlksdjkasdjsdkffjdslakfsdfasdfasdsadfsdffasfsaf</div> 
 
    <div class="date"> 
 
     <h4>sdfasdfsf</h4> 
 
     fasdfsf<a href="#4"><span class="glyphicon glyphicon-link pull-right"></span></a></div> 
 
    </li> 
 
    <li id="5" class="list-group-item entries"> 
 
    <div class="name"> 
 
     <h3>jfklsdfjasklsjdlkasdjflkasfjkl</h3> 
 
     </div> 
 
    <div class="ids"> 
 
     <h4>fhdsjkafhsdkjfsdf</h4> 
 
     fjasdklfjasdkfasd, jfkdl239fj23f2f, <a href="#">hjsdfkhfjksdfsdklfkaf</a>, fdjsklfsd</div> 
 
    <div class="reason"> 
 
     <h4>fasdjkfasf</h4> 
 
     fsdjklasdjl;fkfjalkfdjfkadfjajsdkfjsalksjadlfksadjlksdjkasdjsdkffjdslakfsdfasdfasdsadfsdffasfsaf</div> 
 
    <div class="date"> 
 
     <h4>sdfasdfsf</h4> 
 
     fasdfsf<a href="#5"><span class="glyphicon glyphicon-link pull-right"></span></a></div> 
 
    </li> 
 
    <li id="6" class="list-group-item entries"> 
 
    <div class="name"> 
 
     <h3>jfklsdfjasklsjdlkasdjflkasfjkl</h3> 
 
     </div> 
 
    <div class="ids"> 
 
     <h4>fhdsjkafhsdkjfsdf</h4> 
 
     fjasdklfjasdkfasd, jfkdl239fj23f2f, <a href="#">hjsdfkhfjksdfsdklfkaf</a>, fdjsklfsd</div> 
 
    <div class="reason"> 
 
     <h4>fasdjkfasf</h4> 
 
     fsdjklasdjl;fkfjalkfdjfkadfjajsdkfjsalksjadlfksadjlksdjkasdjsdkffjdslakfsdfasdfasdsadfsdffasfsaf</div> 
 
    <div class="date"> 
 
     <h4>sdfasdfsf</h4> 
 
     fasdfsf<a href="#6"><span class="glyphicon glyphicon-link pull-right"></span></a></div> 
 
    </li> 
 
    <li id="7" class="list-group-item entries"> 
 
    <div class="name"> 
 
     <h3>jfklsdfjasklsjdlkasdjflkasfjkl</h3> 
 
     </div> 
 
    <div class="ids"> 
 
     <h4>fhdsjkafhsdkjfsdf</h4> 
 
     fjasdklfjasdkfasd, jfkdl239fj23f2f, <a href="#">hjsdfkhfjksdfsdklfkaf</a>, fdjsklfsd</div> 
 
    <div class="reason"> 
 
     <h4>fasdjkfasf</h4> 
 
     fsdjklasdjl;fkfjalkfdjfkadfjajsdkfjsalksjadlfksadjlksdjkasdjsdkffjdslakfsdfasdfasdsadfsdffasfsaf</div> 
 
    <div class="date"> 
 
     <h4>sdfasdfsf</h4> 
 
     fasdfsf<a href="#7"><span class="glyphicon glyphicon-link pull-right"></span></a></div> 
 
    </li> 
 
    <li id="8" class="list-group-item entries"> 
 
    <div class="name"> 
 
     <h3>jfklsdfjasklsjdlkasdjflkasfjkl</h3> 
 
     </div> 
 
    <div class="ids"> 
 
     <h4>fhdsjkafhsdkjfsdf</h4> 
 
     fjasdklfjasdkfasd, jfkdl239fj23f2f, <a href="#">hjsdfkhfjksdfsdklfkaf</a>, fdjsklfsd</div> 
 
    <div class="reason"> 
 
     <h4>fasdjkfasf</h4> 
 
     fsdjklasdjl;fkfjalkfdjfkadfjajsdkfjsalksjadlfksadjlksdjkasdjsdkffjdslakfsdfasdfasdsadfsdffasfsaf</div> 
 
    <div class="date"> 
 
     <h4>sdfasdfsf</h4> 
 
     fasdfsf<a href="#8"><span class="glyphicon glyphicon-link pull-right"></span></a></div> 
 
    </li> 
 
    <li id="9" class="list-group-item entries"> 
 
    <div class="name"> 
 
     <h3>jfklsdfjasklsjdlkasdjflkasfjkl</h3> 
 
     </div> 
 
    <div class="ids"> 
 
     <h4>fhdsjkafhsdkjfsdf</h4> 
 
     fjasdklfjasdkfasd, jfkdl239fj23f2f, <a href="#">hjsdfkhfjksdfsdklfkaf</a>, fdjsklfsd</div> 
 
    <div class="reason"> 
 
     <h4>fasdjkfasf</h4> 
 
     fsdjklasdjl;fkfjalkfdjfkadfjajsdkfjsalksjadlfksadjlksdjkasdjsdkffjdslakfsdfasdfasdsadfsdffasfsaf</div> 
 
    <div class="date"> 
 
     <h4>sdfasdfsf</h4> 
 
     fasdfsf<a href="#9"><span class="glyphicon glyphicon-link pull-right"></span></a></div> 
 
    </li> 
 
    <li id="10" class="list-group-item entries"> 
 
    <div class="name"> 
 
     <h3>jfklsdfjasklsjdlkasdjflkasfjkl</h3> 
 
     </div> 
 
    <div class="ids"> 
 
     <h4>fhdsjkafhsdkjfsdf</h4> 
 
     fjasdklfjasdkfasd, jfkdl239fj23f2f, <a href="#">hjsdfkhfjksdfsdklfkaf</a>, fdjsklfsd</div> 
 
    <div class="reason"> 
 
     <h4>fasdjkfasf</h4> 
 
     fsdjklasdjl;fkfjalkfdjfkadfjajsdkfjsalksjadlfksadjlksdjkasdjsdkffjdslakfsdfasdfasdsadfsdffasfsaf</div> 
 
    <div class="date"> 
 
     <h4>sdfasdfsf</h4> 
 
     fasdfsf<a href="#10"><span class="glyphicon glyphicon-link pull-right"></span></a></div> 
 
    </li> 
 
    <li id="11" class="list-group-item entries"> 
 
    <div class="name"> 
 
     <h3>jfklsdfjasklsjdlkasdjflkasfjkl</h3> 
 
     </div> 
 
    <div class="ids"> 
 
     <h4>fhdsjkafhsdkjfsdf</h4> 
 
     fjasdklfjasdkfasd, jfkdl239fj23f2f, <a href="#">hjsdfkhfjksdfsdklfkaf</a>, fdjsklfsd</div> 
 
    <div class="reason"> 
 
     <h4>fasdjkfasf</h4> 
 
     fsdjklasdjl;fkfjalkfdjfkadfjajsdkfjsalksjadlfksadjlksdjkasdjsdkffjdslakfsdfasdfasdsadfsdffasfsaf</div> 
 
    <div class="date"> 
 
     <h4>sdfasdfsf</h4> 
 
     fasdfsf<a href="#11"><span class="glyphicon glyphicon-link pull-right"></span></a></div> 
 
    </li> 
 
    <li id="12" class="list-group-item entries"> 
 
    <div class="name"> 
 
     <h3>jfklsdfjasklsjdlkasdjflkasfjkl</h3> 
 
     </div> 
 
    <div class="ids"> 
 
     <h4>fhdsjkafhsdkjfsdf</h4> 
 
     fjasdklfjasdkfasd, jfkdl239fj23f2f, <a href="#">hjsdfkhfjksdfsdklfkaf</a>, fdjsklfsd</div> 
 
    <div class="reason"> 
 
     <h4>fasdjkfasf</h4> 
 
     fsdjklasdjl;fkfjalkfdjfkadfjajsdkfjsalksjadlfksadjlksdjkasdjsdkffjdslakfsdfasdfasdsadfsdffasfsaf</div> 
 
    <div class="date"> 
 
     <h4>sdfasdfsf</h4> 
 
     fasdfsf<a href="#12"><span class="glyphicon glyphicon-link pull-right"></span></a></div> 
 
    </li> 
 
    <li id="13" class="list-group-item entries"> 
 
    <div class="name"> 
 
     <h3>jfklsdfjasklsjdlkasdjflkasfjkl</h3> 
 
     </div> 
 
    <div class="ids"> 
 
     <h4>fhdsjkafhsdkjfsdf</h4> 
 
     fjasdklfjasdkfasd, jfkdl239fj23f2f, <a href="#">hjsdfkhfjksdfsdklfkaf</a>, fdjsklfsd</div> 
 
    <div class="reason"> 
 
     <h4>fasdjkfasf</h4> 
 
     fsdjklasdjl;fkfjalkfdjfkadfjajsdkfjsalksjadlfksadjlksdjkasdjsdkffjdslakfsdfasdfasdsadfsdffasfsaf</div> 
 
    <div class="date"> 
 
     <h4>sdfasdfsf</h4> 
 
     fasdfsf<a href="#13"><span class="glyphicon glyphicon-link pull-right"></span></a></div> 
 
    </li> 
 
    <li id="14" class="list-group-item entries"> 
 
    <div class="name"> 
 
     <h3>jfklsdfjasklsjdlkasdjflkasfjkl</h3> 
 
     </div> 
 
    <div class="ids"> 
 
     <h4>fhdsjkafhsdkjfsdf</h4> 
 
     fjasdklfjasdkfasd, jfkdl239fj23f2f, <a href="#">hjsdfkhfjksdfsdklfkaf</a>, fdjsklfsd</div> 
 
    <div class="reason"> 
 
     <h4>fasdjkfasf</h4> 
 
     fsdjklasdjl;fkfjalkfdjfkadfjajsdkfjsalksjadlfksadjlksdjkasdjsdkffjdslakfsdfasdfasdsadfsdffasfsaf</div> 
 
    <div class="date"> 
 
     <h4>sdfasdfsf</h4> 
 
     fasdfsf<a href="#14"><span class="glyphicon glyphicon-link pull-right"></span></a></div> 
 
    </li> 
 
    <li id="15" class="list-group-item entries"> 
 
    <div class="name"> 
 
     <h3>jfklsdfjasklsjdlkasdjflkasfjkl</h3> 
 
     </div> 
 
    <div class="ids"> 
 
     <h4>fhdsjkafhsdkjfsdf</h4> 
 
     fjasdklfjasdkfasd, jfkdl239fj23f2f, <a href="#">hjsdfkhfjksdfsdklfkaf</a>, fdjsklfsd</div> 
 
    <div class="reason"> 
 
     <h4>fasdjkfasf</h4> 
 
     fsdjklasdjl;fkfjalkfdjfkadfjajsdkfjsalksjadlfksadjlksdjkasdjsdkffjdslakfsdfasdfasdsadfsdffasfsaf</div> 
 
    <div class="date"> 
 
     <h4>sdfasdfsf</h4> 
 
     fasdfsf<a href="#15"><span class="glyphicon glyphicon-link pull-right"></span></a></div> 
 
    </li> 
 
    <li id="16" class="list-group-item entries"> 
 
    <div class="name"> 
 
     <h3>jfklsdfjasklsjdlkasdjflkasfjkl</h3> 
 
     </div> 
 
    <div class="ids"> 
 
     <h4>fhdsjkafhsdkjfsdf</h4> 
 
     fjasdklfjasdkfasd, jfkdl239fj23f2f, <a href="#">hjsdfkhfjksdfsdklfkaf</a>, fdjsklfsd</div> 
 
    <div class="reason"> 
 
     <h4>fasdjkfasf</h4> 
 
     fsdjklasdjl;fkfjalkfdjfkadfjajsdkfjsalksjadlfksadjlksdjkasdjsdkffjdslakfsdfasdfasdsadfsdffasfsaf</div> 
 
    <div class="date"> 
 
     <h4>sdfasdfsf</h4> 
 
     fasdfsf<a href="#16"><span class="glyphicon glyphicon-link pull-right"></span></a></div> 
 
    </li> 
 
    </ul> 
 
<ul class="pager"> 
 
    <li><a href="#">Next</a></li> 
 
    </ul> 
 
<footer class="footer"> 
 
    <div class="pull-left text-muted">©</div> 
 
    <div class="pull-right text-muted"><a href="#">#</a></div> 
 
    </footer> 
 
</body>

出典

2017-01-05 04:39:08

あなたはまた、上記のコードで問題が何だったのかを説明する必要があると思います。@naila –

@Nailaありがとうございます、それはほとんど正確ですが、http://domain.com /index.html#4）、コードは呼び出されず、以前と同じように非表示になっています。自分のjqueryを修正しようとしたときと同じように – user7377154

固定されたnavbarとアンカーが固定されているブートストラップ

答えて

関連する問題