如何使用jQuery添加特定于链接的滚动动画，水平和垂直？

Question

我在我的网站上有这个脚本：

$(document).ready(function() {
  function filterPath(string) {
    return string
      .replace(/^\//,'')
      .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
      .replace(/\/$/,'');
  }

  $('[href*=#]').each(function() {
    if ( (filterPath(location.pathname) == filterPath(this.pathname))
      && (location.hostname == this.hostname)
      && (this.hash.replace(/#/,'')) ) {

      var $targetId = $(this.hash), 
        $targetAnchor = $('[name=' + this.hash.slice(1) +']');
      var $target = $targetId.length 
        ? $targetId 
        : $targetAnchor.length ? $targetAnchor : false;
      if ($target) {

        var divOffset = $target.parent().offset().top;
        var pOffset = $target.offset().top;
        var pScroll = pOffset - divOffset;

        $(this).click(function() {
          $target.parent().animate({scrollTop: pScroll + 'px'}, 600);
          return false;
        });
      }
    }
  }); 
});

效果很好，并且上下滚动主导航div s但是我希望服务部分内的<a href...> s向左和向右滚动。我还想在投资组合部分添加一个滑块，但上面的代码会规定任何其他代码，因为它适用于所有ul标签。我如何只将它指定给mainnav <=>？

提前致谢

Answer 1

将选择器从'[href * =＃]'更改为'ul.mainnav [href * =＃]'。

如何编写只为您提供所需元素的选择器可能是使用jQuery时最重要的事情。我只能建议阅读精选的关于选择器的jQuery文档（但也推荐其他内容）。

Answer 2

假设您具有以下结构，并且您只想将函数应用于<！>“foo <！>”;链接。并保持其他所有原则。

<div id="mainnav">
  <ul>
    <li>
      <a href="#">foo</a>
    </li>
    <li>
      <a href="http://www.example.com">foo2</a>
    </li>
  </ul>
  <ul>
    <li>
      <a href="#">foo3</a>
    </li>
  </ul>
  <a href="#">foobar</a>
</div>

然后你可以使用这样的jQuery选择

$("#mainnav > ul:first").find("a[href*=#]").css('color','red');

碎成碎片

$("#mainnav > ul:first")
//give me the element with id mainnav and then the first ul child element of it

.find("a[href*=#]")
//find all link elements in this ul which have href set to #

.css('color','red');
//and set their color to red

Answer 3

我不确定我是否完全理解您的问题，但如果您正在寻找仅在某个元素中查找链接的方法，则可以展开您的选择器：

// Assuming your mainnav ul has id="mainnav"
$('ul#mainnav [href*=#]').each(...);

然而，如果你问我，这大多是暂时的解决方法。迟早你可能想要将效果应用于其他元素。您可以为要效果的元素添加class属性：

<a href="#" class="scroll-effect">...</a>

然后选择它们：

$('.scroll-effect').each(...);