我正在努力清理我的锚的工作方式。我有一个固定在页面顶部的标题,所以当你链接到页面其他地方的锚时,页面跳转,锚位于页面顶部,留下固定标题后面的内容(我希望这是有意义的)。我需要一种方法来抵消锚的25px从头部的高度。我更喜欢HTML或CSS,但Javascript也可以接受。
当前回答
我的解决方案结合了CMS的目标和前选择器。其他技术不考虑锚中的文本。调整高度和负边距到你需要的偏移量…
:target::before {
content: '';
display: block;
height: 180px;
margin-top: -180px;
}
其他回答
受Alexander Savin启发的纯css解决方案:
a[name] {
padding-top: 40px;
margin-top: -40px;
display: inline-block; /* required for webkit browsers */
}
如果目标仍然不在屏幕上,你可以选择添加以下内容:
vertical-align: top;
@AlexanderSavin的解决方案在WebKit浏览器中对我来说很棒。
另外,我不得不使用:target伪类,它将样式应用到选定的锚来调整FF, Opera和IE9中的填充:
a:target {
padding-top: 40px
}
注意,这种风格不适合Chrome / Safari,所以你可能不得不使用css-hacks,条件注释等。
我还想注意到,Alexander的解决方案工作,因为目标元素是内联的。如果你不想要链接,你可以简单地改变显示属性:
<div id="myanchor" style="display: inline">
<h1 style="padding-top: 40px; margin-top: -40px;">My anchor</h1>
</div>
不要使用固定位置的导航条,它覆盖了页面的其余内容(整个页面主体都是可滚动的),而是考虑使用静态导航条的不可滚动主体,然后将页面内容放在绝对位置的可滚动div中。
也就是说,有这样的HTML…
<div class="static-navbar">NAVBAR</div>
<div class="scrollable-content">
<p>Bla bla bla</p>
<p>Yadda yadda yadda</p>
<p>Mary had a little lamb</p>
<h2 id="stuff-i-want-to-link-to">Stuff</h2>
<p>More nonsense</p>
</div>
... 和CSS是这样的:
.static-navbar {
height: 100px;
}
.scrollable-content {
position: absolute;
top: 100px;
bottom: 0;
overflow-y: scroll;
width: 100%;
}
然而,这种方法有一个显著的缺点,那就是当页面标题中的元素被聚焦时,用户将无法使用键盘滚动页面(例如,通过向上和向下箭头或page up和page down键)。
下面是一个演示这个操作的JSFiddle。
再加上Ziav的回答(感谢Alexander Savin),我需要使用老式的<a name="…">…</a> as we're using <div id="…">…</div>用于代码中的另一个目的。我在使用display: inline-block时遇到了一些显示问题——每个<p>元素的第一行都略微右缩进(在Webkit和Firefox浏览器上都是如此)。我最终尝试了其他的显示值和display: table-标题对我来说非常适合。
.anchor {
padding-top: 60px;
margin-top: -60px;
display: table-caption;
}
你也可以用follow attr添加一个锚:
(text-indent:-99999px;)
visibility: hidden;
position:absolute;
top:-80px;
并给父容器一个相对的位置。
很适合我。
推荐文章
- 如何让一个按钮将我的页面重定向到另一个页面?
- 有一个固定的位置div,需要滚动,如果内容溢出
- 如何让元素被点击(对于整个文档)?
- Node.js上的html解析器
- 大写还是小写文档类型?
- 我如何检查如果一个变量是JavaScript字符串?
- 如何检测如果多个键被按下一次使用JavaScript?
- 样式化HTML电子邮件的最佳实践
- 如何通过history. pushstate获得历史变化的通知?
- CSS可以在元素中的每个单词后强制换行吗?
- CSS/HTML:什么是使文本斜体的正确方法?
- 使用jQuery改变输入字段的类型
- 在JavaScript中,什么相当于Java的Thread.sleep() ?
- 我如何才能在表中应用边界?
- 如何使一个DIV不包装?