jQuery平滑滚动导航菜单栏 [英] jQuery smooth-scrolling navigation menu bar

问题描述

因此，我一直在尝试使用RootsTheme(使用Bootstrap)，Wordpress(来自Joomla！背景)和Pagodabox；

结果如下: http://ajmalafif.com/

但是，我尝试使用的任何javascript解决方案在导航栏中都遇到了一些已知问题:

路线1)克里斯·科耶尔(Chris Coyier)的顺滑滚动

当前，我的网站在此网站上运行.

什么不起作用 -对于较小的屏幕或调整浏览器大小时，导航将在较高的高度处尴尬地停止(因为它在> 1200px的屏幕宽度上设置为偏移-90px)

有效 -下一个&图像工作的上一个链接按钮(单击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目标都可以精确偏移(也许是基于差异浏览器宽度的差异偏移解决方案)?或者

• 一种使用getElementbyId解决方案时偏移的方法(请参见route#2)，并使其与bootstrap-carousel.js兼容(因此，当单击另一个图像轮播#锚标记时，它不会自行移动)?

感谢您的关注和时间来看看.

解决方案

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

这里是演示

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

So I have been experimenting with RootsTheme (which uses Bootstrap), Wordpress (from Joomla! background) and Pagodabox;

here's the result of it: http://ajmalafif.com/

However I am having some known issues with the navigation bar with any javascript solution that I've tried:

route #1) Chris Coyier's smooth-scrolling

Currently my site runs on this one.

what doesn't work - for smaller screen or when browser resized, the nav will stop at awkwardly at much higher height (since it's set to offset at -90px on > 1200px screen width)

what works - the next & previous link button for images work (click on mysite.com#link doesn't conflict between the nav bar anchor and the image link click anchor)

example of the code: http://jsfiddle.net/ajmalafif/LvPUC/1/

route #2) William Malo's getElementbyId

I like and used this solution at first.

what doesn't work - it doesn't have offset solution so it stops directly on the h1 title and blocks the view of it. - it conflicts with the bootstrap-carousel.js where upon click the image carousel, the screen/navbar will moves and align the image with the top of the browser.

what works - It works with any browser size (and upon resized) and targets/arrives accordingly.

example of the code: http://jsfiddle.net/ajmalafif/bReUF/

--

It may looks like route#1 is the clear winner but like what's currently running on my site, it has few glitches especially when view, say inside an iPad. So is there any pointer/help I can get to make this works either by;

• a href target is accurately offset regardless of the browser width (maybe a solution to have diff offset based on diff browser's width)?, OR

• a way to offset when using getElementbyId solution (see route#2) AND to make it compatible with bootstrap-carousel.js (so it doesn't move itself when click another image carousel # anchor tag)?

Thanks for your concern and time for taking a look at this.

解决方案

you can calculate browser's height and return scrolling for that variable;

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

这篇关于jQuery平滑滚动导航菜单栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！