2017-06-02 17 views
0

最新のコメントhereのjQueryスニペットを使用しています。ユーザーがタブをクリックしたときの2番目のケースでこの動作を回避するにはどうすればよいですか?特定の内部リンクで滑らかなスクロールを避けるにはどうすればよいですか?

GOOD (it's working as it should): 
<a href="#schedule">Schedule</a> 

BAD (scrolls to the top of the page, which I dont want): 
<a class="nav-link" data-toggle="tab" href="#tour" role="tab">TOUR</a> 

<script> 
$('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) { 
     var baseMinScrollTime = 500, 
      baseMaxScrollTime = 900; 

     var docHeight = $(document).height(), 
      triggerTop = $(this).offset().top, 
      targetTop = $target.offset().top; 

     var scrollProportion = (targetTop - triggerTop)/docHeight, 
      relativeTime = ((baseMaxScrollTime - baseMinScrollTime) * scrollProportion) + baseMinScrollTime, 
      // Create inverse relationship (quicker the further we scroll) 
      scrollTime = -1 * (1 - relativeTime); 

     $('html, body').animate({ 
      scrollTop: targetTop - 10 
     }, scrollTime); 
     return false; 
     } 
    } 
    }); 
</script> 

答えて

0

あなたは、あなたのコードから.not部分に避けたいのリンクに言及することができます:あなたは「家」という名前のリンクを避けたい場合に使用、その後、例えば

を:

$('a[href*="#"]') 
:not('[href="#home"]') 
:not('[href="#anotherLinkToSkip"]') 
:not('[href="#yetAnother"]').click(function(){ 
     //your logic here 
}) 

:notは、それ以前に指定されたすべてのものを選択するのに役立ちますそれの後に指定されます。さらにnotブロックを追加して、除外する要素をさらに指定することができます。詳細情報here

+0

ありがとう! #home、#one、#two、#threeの複数のリンクを渡すにはどうすればよいですか? – Jake

+0

私の答えを更新しました。それはあなたのために今働くはずです –

関連する問題