使用带有另一个ahref函数的动画滚动

Question

我已经在我的网页底部实现了此脚本，以便当有人点击导航中的链接导致页面的某个锚点部分时获得很好的慢动画效果。

<script type="text/javascript"> 
$('a').click(function(){ 
$('html, body').animate({ 
    scrollTop: $($(this).attr('href')).offset().top 
}, 1500); 
return false; 
}); 
</script> 

但是，我也有画廊，使用数据过滤器安排在同一页上的几个图像。

<li class="active"><a href="#" data-filter="*">All</a></li> 
<li><a href="#" data-filter=".artwork">Artwork</a></li> 
<li><a href="#" data-filter=".photography">Photography</a></li> 

的问题是，库站上的点击，当我执行的JavaScript滚动动画代码安排的图像。

我已经尝试更改HTML，身体成头，因为这是导航所在的div的ID。此外，我尝试使用导航所在的div类名称而不是html，body $（'html，body'）。animate

有什么办法让这两个函数都有效吗？我可以以某种方式限制JavaScript使用动画滚动到页面的这一部分。因此，要启动动画滚动仅在该页面的一部分，所以该库也可以工作：

<div class="collapse navbar-collapse"> 
       <ul class="nav navbar-nav navbar-right"> 
        <li class="active nav-item"><a href="#services">Services</a></li> 
        <li class="nav-item"><a href="#projects">Projects</a></li> 
        <li class="nav-item"><a href="#team" rel="" id="anchor1" class="anchorLink">Team</a></li> 
        <li class="nav-item"><a href="#contact1" rel="" id="anchor1" class="anchorLink">Contact</a></li> 
       </ul><!--//nav--> 
      </div> 

Answer 1

你应该滚动单击处理程序只分配到要使用触发滚动功能，在a标签选择器.nav-item a。这会阻止您的data-filter链接触发滚动。

$('.nav-item a').click(function(e){ 
    e.preventDefault(); // do this instead of return false (note the e param) 
    $('html, body').animate({ 
    scrollTop: $($(this).attr('href')).offset().top 
    }, 1500); 
}); 

一般其他说明：

• 您正在使用的ID anchor1多个元素。一个给定的id应该只在整个页面上出现一次。另一方面，类名可以多次使用。
• 将事件参数传递到您的点击处理程序中，以防止a标签触发其默认处理程序。 （请用return false;代替return false;查看上述代码中的注释。）