セクションへのスクロール

Question

私のはdivにスクロールしてが機能しないのはなぜですか？エラーはどこですか？ここで

は私のコードをシミュレートcodepenです：Codepen

$(function() { 
$('a[href*=#]:not([href=#])').click(function() { 
    var target = $(this.hash); 
    target = target.length ? target : $('[name=' + this.hash.substr(1) +']'); 
    if (target.length) { 
    $('html,body').animate({ 
     scrollTop: target.offset().top 
    }, 1000); 
    return false; 
    } 
}); 
}); 

は、あなたが使用する必要があります

Answer 1

..事前にありがとう：$("a[href*='#']").not("a[href='#']")か​​

$(function() { 
$("a[href*='#']").not("a[href='#']").click(function() { 
    var target = $(this.hash); 
    target = target.length ? target : $('[name=' + this.hash.substr(1) +']'); 
    if (target.length) { 
    $('html,body').animate({ 
     scrollTop: target.offset().top 
    }, 1000); 
    return false; 
    } 
}); 
}); 

の作業例：

を

$(function() { 
 
     $("a[href*='#']").not("a[href='#']").click(function() { 
 
     var target = $(this.hash); 
 
     target = target.length ? target : $('[name=' + this.hash.substr(1) +']'); 
 
     if (target.length) { 
 
     $('html,body').animate({ 
 
      scrollTop: target.offset().top 
 
     }, 1000); 
 
     return false; 
 
     } 
 
    }); 
 
});

#about, #top { 
 
    height: 100vh; 
 
    padding: 10px; 
 
    text-align: justify; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
 
    <ul class="nav navbar-nav navbar-right"> 
 
    <li><a href="#top" id="bt-first">FIRST</a></li> 
 
    <li><a href="#about" id="bt-about">ABOUT</a></li> 
 
    </ul> 
 
</div> 
 
<section id="top"> 
 
    <h2>SECTION X</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
</section> 
 
<section id="about"> 
 
    <h2>ABOUT</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
</section> 
 
</div>

Answer 2

あなた<a>タグがすでにページが瞬時にそれらのアンカーにジャンプししようとしている、彼らのhrefとして#{section}を使用しているので、これは可能性があります。関数内でe.preventDefault()を使用してリンクをクリックしたときに、このような動作を防ぐ必要があります。

あなたはまた、彼らは正常に動作を確認するために、引用符を使用するようにセレクタを調整する必要があります（documentation mentions that it works for quoted or unquoted valuesが、それは一般的に引用符で良い作品）：あなたはan updated CodePen hereを見ることができます

// Added quotes to comparison selectors (this is usually necessary) 
$('a[href*="#"]:not([href="#"])').click(function(e) { 
    // Prevent any default link behavior (may be overkill in this scenario) 
    e.preventDefault(); 
    // Omitted for brevity 
}); 

。