首页 > 其他 > 详细

不使用锚点定位的情况下的页内位置跳转的一种方法

时间:2015-10-10 12:15:33      阅读:252      评论:0      收藏:0      [点我收藏+]

  当我们在设计单页的时候,面临一些比较长的页面,我们通常会在旁边设置一个导航栏(从用户角度考虑,该导航栏能随着用户页面的变化从而发生位置上的偏移,简答来说,就是不论你怎么滑动页面,该导航栏一直会在一个位置。这样做方便用户在浏览网页的时候能够随时点击导航栏到他想要看到的内容开头去)。

  首先你将要制作一个导航栏,一般我们用CSS样式来实现它能够跟随着屏幕的移动而不发生相对位置的变化,使用CSS中的position属性的fixed来进行控制。用width,height,left或right,top或bottom来决定它相对于屏幕的位置所在。

  接下来我们要利用window.pageXOffset,window.pageYOffset来获取某个页面位置相对于窗口远点的水平和垂直位移,拖动下滑框,到达第一个你想要为其设置定位的页面位置,然后获取它的window.pageXOffsrt和window.pageYOffset。(你问我怎么获取,其实很简单,你设置一个跟随屏幕移动的div,div里面设置一个按钮或者一个标签,为其设置一个事件,利用js代码输出它的window.pageXOffsrt和window.pageYOffset,而这个你也不懂,你可以alert(”window.pageXOffsrt“:window.pageXOffsrt,”window.pageYOffset“:window.pageYOffset))

     好的,你记录下了第一个位置的水平和垂直位移值,接下来你以相同的方法记录剩下的需要定位的位置的位移值。

     现在你的位移值记录好了,你的导航栏也写好了,就下来就剩下为导航栏里对应位置的各个位置的名称来添加事件了。

     假设你的导航栏为1、2、3、4、5

  而你记录这5个内容的位移值分别为(0,209),(0,1685),(0,3591),(0,5080),(0,6542);

  那你为导航栏中的1标签写个点击事件(a,span,button什么都行,因为你并不是通过href来进行锚点跳转,你是通过响应事件来触发方法,使屏幕滚动到你所定位的页面位置,效果是一样的,只不过实现方式不一样而已),然后里面很简单,你只用写一句代码,就是

      window.scrollTo(0,209);

      此时你的浏览器窗口里将会移动到你获取第一个内容的开头的位置,简单来说,你之前获取位移值时你的窗口内容是到那里,现在你点击这个标签,你也就滑到了原来那个位置。很简单吧,在一些不能使用锚点定位跳转的页面中,这样的方法简单实用。

      像博主现在就是用backbone加marionette组合的框架来写网站,使用锚点定位修改url会使页面刷新后为空白页,所以采用此种方法做一些静态内容页面中的页内跳转。

不使用锚点定位的情况下的页内位置跳转的一种方法

原文:http://www.cnblogs.com/sromei666/p/4866180.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!