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

Question

我正在做一些文档，其中大量使用锚点来链接 wiki 上的页面。

请参见此处：

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

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

然而，使用一点 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);
});

Answer 3

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

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

高度必须在视口的高度左右，因此最好的解决方案是创建这些样式但如果你不想使用 js，只需使用 height: 1000px 或更高 — 当然，如果你不介意底部有间隙的话

最好 。部分：它是只有CSS，并且当没有定位锚点时不会有间隙

编辑：只是预览一下：如果vw/vh 单位将出现在其他浏览器中（现在仅在 IE9 中），这可以通过使用 height 的 CSS 来完成： 100vh :)

Answer 4

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

不过，我强烈建议不要这样做，因为这会在不需要的地方扩展您的页面。更聪明的做法是简单地在到达那里时设置标签样式（通过 Javascript / jQuery），以便它向查看者弹出，例如通过将 font-weight 设置为粗体或更改 背景-颜色。

Answer 5

我可能会结合使用 jQuery 和 PHP 来实现此目的：

PHP（在 元素之后的某个位置）：

<?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>

希望这会有所帮助。