2016-12-31 79 views
0

我有这个代码,它运作良好。平滑滚动如何使用摘录?

$('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 我不aplly希望它< li><a href="#apple">Scroll to Section Apple</a></li>

回答

0

你可以使用一些其他data-属性:

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

而且你html里面添加data-no-smooth-scroll="true"到相关链接:

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

以下是您的Codepen叉子:
http://codepen.io/anon/pen/dNbYKe

+0

THKS这是个好主意 – Dmi

0

您可以制作一个if语句,该语句将删除每个具有某个类的元素(即class="notThis")的平滑滚动。

在这种情况下,您必须将该类添加到#apple链接元素:<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; 
    } 
    } 
    } 
}); 
+0

感谢思想 – Dmi

+0

请给它一个点,如果你认为这对你是有益的:) – sebasaenz