如果我在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 |
| ... | | ... |
+---------------------------------+ +---------------------------------+
虽然一些建议的解决方案适用于同一页面内的片段链接(=散列链接)(比如向下滚动的菜单链接)，但我发现当你想使用来自其他页面的片段链接时，它们都不适用于当前的Chrome。
因此，从头开始调用www.mydomain.com/page.html#foo不会抵消当前Chrome中任何给定的CSS解决方案或JS解决方案的目标。
还有一个jQuery错误报告描述了这个问题的一些细节。
解决方案
到目前为止，我发现唯一一个真正在Chrome中工作的选项是JavaScript，不称为onDomReady，但有延迟。
// set timeout onDomReady
$(function() {
setTimeout(delayedFragmentTargetOffset, 500);
});
// add scroll offset to fragment target (if there is one)
function delayedFragmentTargetOffset(){
var offset = $(':target').offset();
if(offset){
var scrollto = offset.top - 95; // minus fixed header height
$('html, body').animate({scrollTop:scrollto}, 0);
}
}
总结
没有JS的延迟解决方案可能在Firefox, IE, Safari中工作，但在Chrome中行不通。
我已经很容易地使用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/
