如果我在HTML页面中有一个非滚动头,固定在顶部,有一个定义的高度:
是否有一种方法可以使用URL锚(#fragment部分)让浏览器滚动到页面中的某一点,但仍然尊重固定元素的高度,而不需要JavaScript的帮助?
http://example.com/#bar
WRONG (but the common behavior): CORRECT:
+---------------------------------+ +---------------------------------+
| BAR///////////////////// header | | //////////////////////// header |
+---------------------------------+ +---------------------------------+
| Here is the rest of the Text | | BAR |
| ... | | |
| ... | | Here is the rest of the Text |
| ... | | ... |
+---------------------------------+ +---------------------------------+
我已经很容易地使用CSS和HTML,使用上面提到的“锚:之前”方法。我认为它是最好的,因为它不会在你的divs之间产生大量的填充。
.anchor:before {
content:"";
display:block;
height:60px; /* fixed header height*/
margin:-60px 0 0; /* negative fixed header height */
}
这似乎并不适用于页面上的第一个div,但你可以通过添加填充到第一个div。
#anchor-one{padding-top: 60px;}
这里有一个工作小提琴:http://jsfiddle.net/FRpHE/24/
使用jQuery的最小侵入性方法:
链接:
<a href="#my-anchor-1" class="anchor-link">Go To Anchor 1</a>
内容:
<h3 id="my-anchor-1">Here is Anchor 1</a>
脚本:
$(".anchor-link").click(function() {
var headerHeight = 120;
$('html, body').stop(true, true).animate({
scrollTop: $(this.hash).offset().top - headerHeight
}, 750);
return false;
});
通过将锚链接类分配给链接,其他链接(如手风琴或制表符控件)的行为不会受到影响。
这个问题不需要javascript,但另一个更受欢迎的问题因为这个问题而关闭了,我无法回答。