0
最近、CSS-Tricksでスムーズにスクロールし、オプションがクリックされたときにナビゲーションバーを閉じる方法を実装しました。問題は、ナビゲーションを閉じるためのブートストラップスクリプトがなければ、スクロールが完璧に動作し、アンカーで正確に停止することです。ブートストラップナビゲーションアンカーが予想以上に進んでスナップバックする理由は？
しかし、自動ブートストラップナビゲーションの終了コードを追加するとすぐにリンクをクリックすると、目的のアンカーに移動して失敗し続け、突然アンカーに戻る。
何が問題なのですか？
誰かが私を助けてくれることを願っています。以下の関連するコードを添付しました。
CSSのトリックが提供するスムーズスクロール：
<script>
.click(function(event) {
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
){
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, function() {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
});
</script>
ブートストラップ3.xのナビゲーションを閉じるためのJavaScriptコード：
<script>
$('.navbar-collapse a').click(function(){
$(".navbar-collapse").collapse('hide');
});
</script>
私のHTMLコード：
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Navigation logo and dropdown icon -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#" id="logo">LOGO</a>
</div>
<!-- Navigation Options -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" id="nav-appearance">
<li id="main-nav"><a href="#home">Home <span class="sr-only">(current)</span></a></li>
<li id="main-nav"><a href="#about">About Us</a></li>
<li id="main-nav"><a href="#services">Services</a></li>
<li id="main-nav"><a href="#gallery">Gallery</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>