html - 如何调整 href="#object"

Question

当使用 name="object" 然后使用 href="#object" id 让页面滚动到该对象时，可以调整页面所在的位置。而不是窗口的顶部，向下几个像素。我有一个固定的导航栏，当滚动时，内容在后面，所以导航栏总是可见的。因此，当我使用 href="#object" 时，它的一部分被切断，因为它位于导航栏后面。有什么修复吗？谢谢你。

Answer 1

使用命名锚点更改元素的顶部填充和边距样式。例如，如果您的标题为 100 像素高，则为您命名的锚点设置 -100 像素的边距顶部和 100 像素的填充顶部。

请参阅此jsFiddle 示例。

在此示例中，该链接将使粗体文本（'Vestibulum ante ipsum'）距离页面顶部 100 像素。

Answer 2

如果您想通过 css 选择器设置这些属性（如 j08691 中提到的），请将这个 JS 放入您的 html 中，然后您可以为每个锚点一个类，如果属性选择器不起作用（旧浏览器）：

function findAnchors(){
    anker = document.anchors;
    for(i=0; i<anker.length; i++ ){
        anker[i].className = "anchor";
    }
}
window.onload = findAnchors();

Answer 3

您可以通过在插件配置中设置jQuery.localScroll来做到这一点。offset

在这里，有一个小提琴。