Question

我正在做一些文档，我大量使用锚点来连接维基上的页面。

见这里：

http://code.google.com/p/xcmetadataservicestoolkit/wiki/ServicesExplained#Platform_Data_Structures

真正使这项工作正常运行的功能是当浏览器在窗格的绝对顶部显示锚点时。当它变得混乱时，链接到锚点显示锚点在页面中间向下，因为页面一直向下滚动

见这里：

http://code.google.com/p/xcmetadataservicestoolkit/source/browse/trunk/mst-common/src/java/xc/mst/utils/Util.java#227

我在wiki中的解决方案（第一个链接）是在页面底部放置一个空白图像，只是为了让浏览器在右上方显示锚点。有一个更好的方法吗？有没有办法在第二个链接中（我无法添加空白图像）？

Answer 1

在页面底部放置一个空白图像是一个坏主意，因为它会将文档扩展到不必要的高度。

你可以输入一些javascript来将效果应用到你刚刚去过的锚点，无论它在哪里都能突出显示。

Answer 2

你可以使用下面的CSS创建一个绝对定位的伪元素，其高度非常高，适用于目标块（对于帖子中的第二个链接：

#nums td:target a::before {
    content: '';
    position: absolute;
    height: 700px;
}

高度必须在视口的高度附近，因此最好的解决方案是使用js动态创建这些样式。但如果你不想使用js，只需使用height: 1000px或更多 - 如果你不介意底部的差距。

最好的部分：它只是CSS，没有目标没有锚点就没有差距。

编辑：只是先睹为未来：如果vw/vh单位将来到其他浏览器（现在只在IE9中），这可能只需使用CSS即可完成height: 100vh：）

Answer 3

如果不改变文档的高度（即在底部添加额外的填充），您将始终遇到此问题。

然而，使用JS / jQuery，可以大大改善用户体验：

单击命名锚点

不是快速跳转（broswer的默认行为），而是添加平滑滚动
添加一个突出显示以指示当前选择（这在第二种情况下非常有用，因为用户可以清楚地看到当前的内容）

创建了一个演示来说明概念：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 acnhor has a corresponding id element
    var elemId = $(this).attr('href');
    smoothScroll(elemId);
});

Answer 4

你可以使用Javascript / jQuery创建一个白色div，它具有将元素放在浏览器窗口顶部所需的必要高度，你甚至可以删除它滚动。

但是我强烈建议不这样做，因为这会扩展您不需要的页面。在去那里（通过Javascript / jQuery）简单地设计标签样式会更加明智，因此它会弹出给观众，例如将font-weight设置为粗体或更改background-color。

Answer 5

我可能会使用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>

希望这有帮助。

链接到页面底部附近的锚点

5 个答案: