平滑滚动如何使用摘录？

Question

我有这段代码并且运行良好。

$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
    && location.hostname == this.hostname) {
    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
    if (target.length) {
        $('html, body').animate({
            scrollTop: target.offset().top
        }, 1000);
        return false;
    }
}

});

但我也有一些元素，我不想为它们应用平滑滚动！我该怎么做？示例 - http://codepen.io/zoom/pen/ggYaXZ 我不想将它应用到 <li><a href="#apple">Scroll to Section Apple</a></li>

Answer 1

您可以使用其他一些 data- 属性：

$('a[href*="#"]:not([href="#"]):not([data-no-smooth-scroll])').click(function() {

在你的 html 中添加 data-no-smooth-scroll="true" 到相关的 link:

<a href="#apple" data-no-smooth-scroll="true">Scroll to Section Apple</a>

这是你的代码笔的分支：
http://codepen.io/anon/pen/dNbYKe

Answer 2

您可以创建一个 if 语句来移除每个具有 class 的元素的平滑滚动，即 class="notThis"。

在这种情况下，您必须将 class 添加到 #apple link 元素：<a class="notThis" href="#apple">Scroll to Section Apple</a>.

会是这样的

$('a[href*="#"]:not([href="#"])').click(function() {
    if ($(this).attr("class") !== "notThis"){
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
    if (target.length) {
      $('html, body').animate({
        scrollTop: target.offset().top
      }, 1000);
      return false;
    }
  }
  }
});

平滑滚动如何使用摘录？

smooth scrolling how to use excerpting?

javascript

jquery

hash

smooth-scrolling