关于锚点链接的偏移问题
来源:互联网 发布:淘宝快递最便宜多少钱 编辑:程序博客网 时间:2024/04/28 10:37
用BOOSTRAP写页面的时候,用到了锚点链接<a href="#section1"></a>
,但是发现点击a到对应的section的时候,不能到section的上面,会到section中的某个位置,一开始我以为是元素内容部的margin或者h1的问题,后来通过console.log()输出高度等发现了原因:最上面的nav 加了属性position:fixed的原因———虽然元素被fixed在最上面了,可是页面计算section的页边距top的时候还是把nav的高度算上去了,所以点击锚点链接的时候,偏移的距离是section页边距的高度加上nav的高度( section.offset().top + nav.height)。解决方法如下:
我们要让网页的位置再向下偏移一小段距离(原版在这里https://segmentfault.com/q/1010000000124208)。即
(1)在<section>
前面再加一个<a class="target-fix">
作为暗锚,将这个锚点进行偏移:
.target-fix { position: relative; top: -60px; // 偏移为nav被fixed元素的高度 display: block; height: 0; //高度为0 overflow: hidden;}。
(2)对于支持css3的:target声明可以这样:
article.a-post:target{ padding-top:44px;}
或者直接给section设定一个类.section, 然后设定每个section的padidng-top值(设置marign-top没用噢,只能padding值,道理你懂的)。
(3)用jquery去调整scroll解决:
$(function(){ if(location.hash){ var target = $(location.hash); if(target.length==1){ var top = target.offset().top-44; if(top > 0){ $('html,body').animate({scrollTop:top}, 1000); } } }});
或者jquery的jquery-hashchange,绑定window.onhashchange事件:
$(function(){ /* 绑定事件*/ $(window).hashchange(function(){ var target = $(location.hash); if(target.length==1){ var top = target.offset().top-44; if(top > 0){ $('html,body').animate({scrollTop:top}, 1000); } } }); /* 触发事件 */ $(window).hashchange();});
0 0
- 关于锚点链接的偏移问题
- 锚点定位偏移问题的解决
- 锚点偏移问题的解决
- html锚点 偏移问题
- 关于偏移地址的问题
- 关于内存偏移的问题
- QQ群里问的关于偏移字节问题
- 关于百度地图偏移的问题
- 关于百度地图偏移的问题
- 关于WdatePicker显示位置偏移的问题
- 关于地图偏移问题的解答
- 关于百度地图偏移的问题
- 锚点偏移
- 关于iphone 上touch事件动态改变元素位置时与touch点发生偏移的问题
- 页面内容多,加载时间长的时候,锚点位置偏移问题
- 关于虚继承中成员偏移量的诡异问题
- 关于谷歌地图GPS偏移问题的解决办法
- HTML锚点定位偏移
- u盘重新分区
- JSP访问Hadoop 图片存储服务
- c++作业
- cocos2d-JS (一)HelloWorld
- Git学习(四)----版本跳转
- 关于锚点链接的偏移问题
- Understanding the Android Source Code
- 提高Web服务端并发效率的异步编程技术
- Git的环境搭建与安装
- Codeforces 367A Sereja and Algorithm 【规律】
- Redis配置数据持久化---APPEND ONLY MODE
- 1154: 【C语言训练】邮票组合问题*__简单题
- Ubuntu安装深度学习平台Torch7以及zbs_torch IDE
- Problem Q