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

我正在做一些文档，我大量使用锚点来连接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解决方案（第一个链接）是在页面底部放置一个空白图片，只是为了让浏览器在顶部显示锚点。有一个更好的方法吗？有没有办法做到这一点在第二个链接（我不能添加一个空白图像）？

来源

2011-08-18 andersonbd1

如果不控制服务器（例如，在第二个例子中）我真的不知道如何改变这种行为。图片/额外'
'可能是您可以控制的网页上的最佳解决方案。 –

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

你可以抛出一些javascript来将效果应用到你刚刚走过的锚点，以突出它在哪里。

来源

2011-08-18 18:49:16

您可能使用JavaScript/jQuery来创建一个白色div有把你的元素在浏览器窗口顶部所需要的必要的高度，你甚至可以删除此滚动时离开。

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

来源

2011-08-22 14:23:51 Kokos

您可以创建一个absolutre定位伪元素，只要使用下面的CSS（在您的文章的第二个链接一个伟大的高度，以目标块：

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

高度必须围绕的高度视口，所以最好的解决方案是使用js快速创建这些样式，但如果你不想使用js，只需使用height: 1000px或更多 - 如果你不介意在底部出现间隙。

最好的部分：它只有CSS，当没有锚定目标时没有间隙。

编辑：只是一个先睹为快的未来：如果单位将来到其他浏览器（现在只要在IE9），这可能是赫然只用CSS使用height: 100vh :)

来源

2011-08-25 09:57:50 kizu

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

希望这会有所帮助。

来源

2011-08-25 21:58:41 k4t434sis

在不改变文档的高度（即在底部添加额外填充）的情况下，您将始终存在此问题。

而不是跳跃在一瞬间（broswer的默认行为）：

但是，使用JS/jQuery的，在用户体验位可显着改善：

在点击一个命名锚，添加一个平滑滚动
添加一个高光显示当前选择（这有助于在第二种情况下，因为用户可以清楚地看到当前是什么）

创建一个演示来说明概念：http://jsfiddle.net/mrchief/PYsyN/9/

CSS

<style> 
    .current { font-weight: bold; } 
</style>

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); 
});

来源

2011-08-27 10:28:39 Mrchief

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

回答

相关问题