页面定位导航滚动插件

标签：

　　今天做页面定位导航时踩到一坑，由于页面顶部有一个fixed的导航条，所以用直接用锚点效果不好。所以打算用js来实现，顺便还有滚动的效果。昨晚做的时候想的是直接把tag设定为固定的值，但是睡觉前在平板上查看网页的时候发现，响应式布局，放到平板上top值就变了。所以今天起床又开始鼓捣这只小虫。

　　使用了jquery，然后滚动函数中使用jq来设定值，本来打算找到id后用 offset().top 加减一个差值就可以定位到我想要的位置。但是，在不同浏览器中obj.offset().top的值不一样，并且，刷新页面后这个值一直在变动，瞬间就奔溃了。研究了一下午也没找出问题在哪儿。最后搜索了一个插件解决这个问题，下面主要说说这个插件。

　　插件下载。记录一下插件的使用：

　　首先下载插件后，把插件在jquery后面引入：

1 <script src="js/jquery-1.9.1.min.js"></script>
2 <script src="js/jquery.nav.js"></script>

　　然后在js中调用：

1 $(document).ready(function() {
2     $(‘#nav‘).onePageNav();
3 });

1 Example usage:
2 $(‘#nav‘).onePageNav({
3     currentClass: ‘current‘,
4     changeHash: false,
5     scrollSpeed: 750
6 });

　　在我的页面里，由于需要定位到id位置的上面一定值的位置，所以目前的做法是在该位置的里面加了一个空div，设置一个id，在css中用绝对定位，给一个相应的top：-100px。就可以定位到我需要的位置。这个办法确实不是好，但是目前只能想到这个笨办法。以后有了更好的办法再修改吧。令附上应用到的页面的链接,个人主页，还未完成。

页面定位导航滚动插件

标签：

原文地址：http://www.cnblogs.com/eoff/p/5146399.html