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，body更改为标题，因为这是导航所在的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;请参阅上面代码中的注释。）

使用animate滚动和另一个ahref函数

1 个答案: