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平滑滚动导航菜单栏

回答

相关问题