jQuery平滑滾動導航菜單欄

所以我一直在試驗RootsTheme（使用Bootstrap），Wordpress（來自Joomla！背景）和Pagodabox;jQuery平滑滾動導航菜單欄

這裏是它的結果：但是我有，我試過任何JavaScript的解決方案與導航欄的一些已知問題http://ajmalafif.com/

：

路線＃1）克里斯Coyier的平滑滾動

目前我的網站運行在這一個。

什麼行不通 - 爲小屏幕或當瀏覽器大小時，資產淨值將停止在笨拙地在更高的高度（因爲它的設置來抵消-90px上> 1200像素的屏幕寬度）

什麼工作 - 對於圖像的工作下一個&一個鏈接按鈕（點擊mysite.com＃鏈接做導航欄錨和圖片鏈接點擊錨之間不衝突）的代碼

例如：http://jsfiddle.net/ajmalafif/LvPUC/1/

路線＃2）威廉馬洛的getE lementbyId

我喜歡並首先使用此解決方案。

什麼不起作用 - 它沒有偏移解決方案，所以它直接停在h1標題上並阻止它的視圖。 - 它與bootstrap-carousel.js相沖突，點擊圖像旋轉木馬後，屏幕/導航欄將移動並將圖像與瀏覽器頂部對齊。

什麼作品 - 它適用於任何瀏覽器大小（和調整大小）和目標/到達相應。代碼

例如：http://jsfiddle.net/ajmalafif/bReUF/

它可能看起來像路線＃1是明顯的贏家，但像什麼在我的網站目前運行的，它有一些小問題尤其是當看，說裏面一臺iPad。那麼有沒有任何指標/幫助我可以做到這一點，作品或;

A HREF目標精確地偏移而不管瀏覽器的寬度的（可能是溶液已經DIFF偏移基於差異瀏覽器的寬度）+，OR
的方式使用的getElementById溶液時，以抵消（參見路線＃2），並使其與bootstrap-carousel.js兼容（因此，當點擊另一個圖像旋轉木馬＃錨標籤時它不會自行移動）？

感謝您的關注和時間來看看這個。

來源

2012-07-04 ajmalafif

您可以計算瀏覽器的高度並返回該變量的滾動;

here is DEMO

var browH = $(window).height(); 
      //alert(browH); 
    if (browH < 500) { 
     $(scrollElem).animate({scrollTop: targetOffset-80}, 800,function() { location.has = target;}); 
    } 
    else if (browH > 500) { 
     $(scrollElem).animate({scrollTop: targetOffset-80}, 400,function() { location.has = target;}); 
    }

來源

2012-07-04 09:53:05

嘿感謝指針！我正在努力使其與我的網站一起工作（不知何故，它不適用於我的網站設置）。但是這應該足夠我開始工作。欣賞它！並且要求15點聲望投票起來是荒謬的！ – ajmalafif

我很高興我可以幫助:)你不需要投票，只要選擇它作爲答案，如果它的工作（： –

jQuery平滑滾動導航菜單欄

回答

相關問題