我正在做一些文档，我大量使用锚点来链接 wiki 上的页面。
看这里：
http://code.google.com/p/xcmetadataservicestoolkit/wiki/ServicesExplained#Platform_Data_Structures
真正使这项工作顺利进行的功能是浏览器在窗格的绝对顶部显示锚点。当链接到锚点时会感到困惑，因为页面一直向下滚动，所以锚点显示在页面的中途
看这里：
我在 wiki（第一个链接）中的解决方案是在页面底部放置一个空白图像，只是为了让浏览器在顶部显示锚点。有一个更好的方法吗？有没有办法在第二个链接中做到这一点（我不能在其中添加空白图片）？
【问题讨论】：
<br /> 可能是您可以控制的页面上的最佳解决方案。
在页面底部放置空白图片是个坏主意，因为它会将文档扩展至不必要的高度。
您可以添加一些 javascript 来对您刚刚到达的锚点应用效果，以便在任何位置突出显示它。
【讨论】：
如果不改变文档的高度（即在底部添加额外的填充），您总会遇到这个问题。
但是，使用一点 JS/jQuery，用户体验可以大大改善：
点击命名锚点时：
创建了一个演示来说明这些概念：http://jsfiddle.net/mrchief/PYsyN/9/
CSS
<style>
.current { font-weight: bold; }
</style>
JS
function smoothScroll(elemId) {
// remove existing highlights
$('.current').css({backgroundColor: "transparent"}).removeClass('current');
var top = $(elemId).offset().top;
// do a smooth scroll
$('html, body').animate({scrollTop:top}, 500, function(){
// add an highlight
$(elemId).animate({backgroundColor: "#68BFEF" }, 500, function () {
// keep tab of current so that style can be reset later
$(elemId).addClass('current');
});
});
}
// when landing directly
if (document.location.hash) {
smoothScroll(document.location.hash);
}
$('a[href*="#"]').click(function() {
// utilizing the fact that named anchor has a corresponding id element
var elemId = $(this).attr('href');
smoothScroll(elemId);
});
【讨论】：
您可以使用以下 CSS 创建一个绝对定位的伪元素，该伪元素具有很高的目标块高度（对于您帖子中的第二个链接：
#nums td:target a::before {
content: '';
position: absolute;
height: 700px;
}
高度必须在视口的高度附近，因此最好的解决方案是使用 js 动态创建这些样式。但如果你不想使用 js，就使用height: 1000px 或更多——当然，如果你不介意底部有空隙。
最好的部分：它只是 CSS，当没有定位锚时不会有间隙。
编辑：只是对未来的一瞥：如果 vw/vh 单元会出现在其他浏览器中（现在它只在 IE9 中），这可以通过使用 @987654324 的 CSS 来完成@ :)
【讨论】：
您可以使用 Javascript / jQuery 创建一个白色的div，该div 具有将您的元素放在浏览器窗口顶部所需的高度，您甚至可以在滚动时将其删除.
但是，我强烈建议您不要这样做，因为这会将您的页面扩展到不需要的地方。在到达那里（通过 Javascript / jQuery）简单地设置标签的样式要聪明得多，因此它会弹出给查看器，例如通过将 font-weight 设置为粗体或更改 background-color。
【讨论】：
我可能会为此使用 jQuery 和 PHP 的组合：
PHP（就在您的 <body> 元素之后）：
<?php
$anchor = explode('#', $_SERVER['REQUEST_URI']);
$anchor = $anchor[1];
echo '<div id="selected-anchor" anchor="'.$anchor.'"></div>';
?>
然后是 jQuery：
<script type="text/javascript">
$(function(){
$('#selected-anchor').css('background-color', '[Whatever highlight color you want]');
});
</script>
希望这会有所帮助。
【讨论】：