Question

我试图使用jQuery动画滚动顶部使用滚动效果，但它无法正常工作，我无法弄清楚原因。

我的整个代码可以在这里找到...... https://codepen.io/andresq820/project/editor/Aogyqr

我的导航栏具有以下链接和每个以js开头的jQuery -

 <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">

 <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

首先，此行<li class="js--scroll-to-main"> <a href="#header">Inicio</a> </li>没有部分ID。让我用第二个作为示例，然后根据您自己的用法进行调整。试试

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

看看是否有效。

Answer 2

您必须将整个jQuery代码包装在document.ready函数中。然后平滑的滚动效果将起作用。希望它会帮到你。这是整个代码。

＆＃13;

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);    
  });
});

＆＃13;

<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>

＆＃13;

jQuery动画滚动它无法正常工作

2 个答案: