jQueryアニメーションスクロールトップが動作しません。

Question

jQueryアニメーションスクロールトップを使用してスクロールエフェクトを使用しようとしていますが、動作していないため、その理由がわかりません。私の全体のコードはここで見つけることができ

... https://codepen.io/andresq820/project/editor/Aogyqr

私のナビゲーションバーは、私はその後、各セクションがで標識した各js--

<div class="menu-section"> 
    <ul class="main-nav js--main-nav"> 
     <li class="js--scroll-to-main"> <a href="#header">Inicio</a> </li> 
     <li class="js--scroll-to-about_us"> <a href="#section-about_us">Nosotros</a> </li> 
     <li class="js--scroll-to-services"> <a href="#section-services">Servicios</a> </li> 
     <li class="contact-link js--scroll-to-contact_us"> <a href="#section-contact" class="separator">Contactanos</a> </li> 
    </ul>  
</div> 

から始まるため、以下のリンクとjQueryのクラスを持っています次のように私は、スクロールが上陸したいそれぞれのクラス

<section class="section-about_us js--section-about_us" id="section-about_us"> 

<section class="section-services js--section-services" id="section-services"> 

<section class="section-contact js--section-contact" id="section-contact"> 

私のjQueryのコードは

を下回っています

/* scroll buttons/links */ 
$('.js--scroll-to-main').click(function(){ 
    $('html, body').animate({scrollTop: $('header').offset().top}, 1000);  
}); 

$('.js--scroll-to-about_us').click(function(){ 
    $('html, body').animate({scrollTop: $('.js--section-about_us').offset().top}, 1000);  
}); 

$('.js--scroll-to-services').click(function(){ 
    $('html, body').animate({scrollTop: $('.js--section-services').offset().top}, 1000);  
}); 

$('.js--scroll-to-contact_us').click(function(){ 
    $('html, body').animate({scrollTop: $('.js--section-contact').offset().top}, 1000);  
}); 

Answer 1

jQueryコード全体をdocument.ready関数内にラップする必要があります。スムーズなスクロール効果が働きます。それがあなたを助けてくれることを願っています。ここにコード全体があります。

jQuery(document).ready(function(){ 
 
    /* scroll buttons/links */ 
 
    $('.js--scroll-to-main').click(function(){ 
 
     $('html, body').animate({scrollTop: $('header').offset().top}, 1000);  
 
    }); 
 

 
    $('.js--scroll-to-about_us').click(function(){ 
 
     
 
     $('html, body').animate({scrollTop: $('.js--section-about_us').offset().top}, 1000);  
 
    }); 
 

 
    $('.js--scroll-to-services').click(function(){ 
 
     
 
     $('html, body').animate({scrollTop: $('.js--section-services').offset().top}, 1000);  
 
    }); 
 

 
    $('.js--scroll-to-contact_us').click(function(){ 
 
     
 
     $('html, body').animate({scrollTop: $('.js--section-contact').offset().top}, 1000);  
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="menu-section"> 
 
    <ul class="main-nav js--main-nav"> 
 
     <li class="js--scroll-to-main"> <a href="#header">Inicio</a> </li> 
 
     <li class="js--scroll-to-about_us"> <a href="#section-about_us">Nosotros</a> </li> 
 
     <li class="js--scroll-to-services"> <a href="#section-services">Servicios</a> </li> 
 
     <li class="contact-link js--scroll-to-contact_us"> <a href="#section-contact" class="separator">Contactanos</a> </li> 
 
    </ul>  
 
</div> 
 
    
 
<section class="section-about_us js--section-about_us" id="section-about_us">I then have each section labeled with the respective class where I want the scroll to land as followsI then have each section labeled with the respective class where I want the scroll to land as followsI then have each section labeled with the respective class where I want the scroll to land as followsI then have each section labeled with the respective class where I want the scroll to land as followsI then have each section labeled with the respective class where I want the scroll to land as follows</section> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<section class="section-services js--section-services" id="section-services">I then have each section labeled with the respective class where I want the scroll to land as followsI then have each section labeled with the respective class where I want the scroll to land as followsI then have each section labeled with the respective class where I want the scroll to land as followsI then have each section labeled with the respective class where I want the scroll to land as follows</section> 
 
<br> 
 
<br> 
 
<br> 
 
<br> 
 
<section class="section-contact js--section-contact" id="section-contact">I then have each section labeled with the respective class where I want the scroll to land as followsI then have each section labeled with the respective class where I want the scroll to land as followsI then have each section labeled with the respective class where I want the scroll to land as followsI then have each section labeled with the respective class where I want the scroll to land as follows</section>

Answer 2

まず、この行<li class="js--scroll-to-main"> <a href="#header">Inicio</a> </li>にセクションIDはありません。 2番目の例を例として使用し、それを自分の使い方に合わせて調整しましょう。 試用

$('.js--scroll-to-about_us').click(function(){ 
//alert("alert here to see if the link is making contact"); 
$('#section-about_us').slideDown(1000); 
}); 

これが機能するかどうかを確認してください。