使用絕對路徑錨鏈接的平滑移動

我使用以下jQuery在點擊後給予my links（頂部菜單欄）平滑移動。使用絕對路徑錨鏈接的平滑移動

這個工作正常，當鏈接是<a href="#services">link</a>;然而，一旦整個地址被預置爲散列標記<a href="http://domain.com#services">link</a>，它就不起作用。

我必須使用絕對路徑，所以當從內部頁面點擊鏈接時，它們仍會將您帶回主頁和正確的位置。

$('a[href^="#"]').on('click',function (e) { 
     e.preventDefault(); 
     var target = this.hash, 
      $target = $(target); 
     $('html, body').stop().animate({ 
      'scrollTop': $target.offset().top 
     }, 900, 'swing', function() { 
      window.location.hash = target; 
     }); 
    });

有關如何修改該代碼的任何想法，因此它適用於絕對路徑的鏈接？

來源

2014-05-15 farjam

然後，您將不得不做的是防止新加載的頁面滾動到目標錨點，然後適當地將其動畫到正確的位置。 – Terry

而不是使用選擇器，在我看來是瘋狂的，像.anchor-link或類似的東西添加到您想要動畫的所有鏈接。

然後更新您的代碼以

$('.anchor-link').on('click',function (e) { 
     e.preventDefault(); 
     var target = this.hash, 
      $target = $(target); 
     $('html, body').stop().animate({ 
      'scrollTop': $target.offset().top 
     }, 900, 'swing', function() { 
      window.location.hash = target; 
     }); 
    });

來源

2014-05-15 16:09:39 mituw16

但是，如果有人在內部頁面（'http：// domain.com/internal.html'）並點擊（'http：// domain.com＃services'）返回到首頁，會嗎？ – farjam

我不確定我明白你在這裏問什麼。將jquery選擇器更改爲類而不是僅將目標錨定爲鏈接，會使您發佈的代碼適用於具有該類的任何鏈接。那是你想要達到的目標嗎？ – mituw16

我同意將選擇器更改爲一個類;然而，如果有人從內部頁面點擊'http：// domain.com＃services'返回主頁，他們並不真正「點擊」鏈接，所以jQuery「click」事件將不會被觸發（因爲頁面已經重新加載）。那有意義嗎？ – farjam

-1

你不需要使用jQuery這個我也不覺得jQuery的動畫會產生最好的結果。你可以在css3中完成這一切，並對動畫有更多的控制權。這是一個jsfiddle類似於你正在嘗試做的事情。正如你可以看到你剛纔設置的div的ID，然後用財產以後這樣的：

#home:target ~ #header #navigation #link-home, 
#portfolio:target ~ #header #navigation #link-portfolio, 
#about:target ~ #header #navigation #link-about, 
#contact:target ~ #header #navigation #link-contact{ 
    background: #000; 
    color: #fff; 
}

爲了讓知道你的目標是特定的DIV當你點擊導航按鈕的CSS。然後你使用css3轉換

-webkit-transition: all .8s ease-in-out; 
-moz-transition: all .8s ease-in-out; 
-o-transition: all .8s ease-in-out; 
    transition: all .8s ease-in-out;

要動畫的div如你所願。

來源

2014-05-15 16:24:51

使用絕對路徑錨鏈接的平滑移動

回答

相關問題