滾動到div粘滯導航（基礎頂杆）

我正在使用Zurb的基金會來創建一個網站。我正在使用它作爲我的菜單的頂部欄，並使其對頁面變得粘滯。這是一個單獨的頁面，所以要轉到頁面的其他部分我想使用頂部欄。當用戶點擊「聯繫人」時，我希望頁面以平滑滾動效果滾動到網站的聯繫人部分（div with id =「contact」）。滾動到div粘滯導航（基礎頂杆）

我已經嘗試了很多東西，比如： animated autoscroll to div onclick
人和： jQuery jump or scroll to certain position, div or target on the page from button onclick

但事實是，無論我嘗試的頁面不滾動。有趣的是，它顯示了動畫效果。但它不會轉到聯繫人部分，而是轉到頁面頂部。

我在這裏錯過了一些明顯的東西嗎？或者是Zurb的基金會干擾？

頁的例子可以在這裏找到：Out of date example

任何建議，幫助解決我的無能，將不勝感激！

來源

2013-10-10 Sander

你的錨點都工作正常，但如果你想要一個平滑的滾動效果 - 類似於使用鼠標滾輪時會發生什麼 - 你將需要一些jQuery插件來做到這一點。

谷歌的'jquery平滑滾動'將提供一堆你可以使用的東西，例如第一個條目是GitHub鏈接是我在各種項目中使用的鏈接（https://github.com/kswedberg/jquery-smooth-scroll）。所有你需要做的就是拉入jQuery文件，用smoothScroll（）初始化一個特定的類，然後讓你想要滾動的任何標籤都有這個類。

它詳細說明如何在自述文件中使用它。

來源

2013-10-16 10:28:19

我實際上修復了它現在跳轉到特定div的導航。我會嘗試添加Smooth Scroll以獲得更好的效果:)謝謝！ – Sander

我已經使用了很多。我忘記了我從哪裏借來的，所以我不知道該從哪裏獲得信用。

$(function() { 
// Slow slides for internal links 
$('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 - 30 
      }, 1000); 
      if ($(window).width() < 600) 
      { 
       $('nav ul').slideUp(); 
      } 
      return false; 
     } 
    } 
}); 
});

來源

2014-05-06 21:51:25 bockymurphy

滾動到div粘滯導航（基礎頂杆）

回答

相關問題