jQuery 平滑滚动导航菜单栏

Question

所以我一直在尝试 RootsTheme（它使用 Bootstrap）、Wordpress（来自 Joomla！背景）和 Pagodabox；

这是它的结果：http://ajmalafif.com/

但是，在我尝试过的任何 javascript 解决方案中，导航栏都有一些已知问题：

路线 #1) Chris Coyier 的平滑滚动

目前我的网站在这个网站上运行。

什么不起作用 - 对于较小的屏幕或当浏览器调整大小时，导航会尴尬地停在更高的高度（因为它设置为在 > 1200 像素的屏幕宽度上偏移 -90 像素）

什么有效 - 用于图像的下一个和上一个链接按钮（单击 mysite.com#link 不会在导航栏锚点和图像链接单击锚点之间发生冲突）

代码示例：http://jsfiddle.net/ajmalafif/LvPUC/1/

路线 #2) William Malo 的 getElementbyId

我一开始喜欢并使用了这个解决方案。

什么不起作用 - 它没有偏移解决方案，所以它直接停在 h1 标题上并阻止它的视图。 - 它与 bootstrap-carousel.js 冲突，点击图像轮播后，屏幕/导航栏将移动并将图像与浏览器顶部对齐。

什么有效 - 它适用于任何浏览器大小（并在调整大小时）并相应地定位/到达。

代码示例：http://jsfiddle.net/ajmalafif/bReUF/

--

看起来路线#1 是明显的赢家，但就像我网站上当前运行的一样，它几乎没有故障，尤其是在查看时，比如在 iPad 内。那么是否有任何指针/帮助我可以通过以下方式完成这项工作；

• 无论浏览器宽度如何，href 目标都会准确偏移（可能是基于 diff 浏览器宽度的 diff 偏移的解决方案）？或者

• 使用 getElementbyId 解决方案时的一种偏移方式（参见路线#2）并使其与 bootstrap-carousel.js 兼容（因此当单击另一个图像轮播 # 锚标记时它不会自行移动）？

感谢您的关注和时间来看看这个。

Answer 1

您可以计算浏览器的高度并返回该变量的滚动；

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;});
    }