Question

我正在尝试创建一个锚链接，因此当用户点击菜单上的某个项目时，它会转到指定的目标位置。我的菜单包含三个项目（一，二，三）。当我单击例如Three时，它会跳转到Three但它的标题会在标题下面。我怎么能防止这种情况？我希望用户能够看到标题。请注意，我希望我的标题被修复，我希望内容在标题后面滚动。

HTML：

<body>
<header>
    <nav>
        <ul>
            <li><a href="#one">One</a></li>
            <li><a href="#two">Two</a></li>
            <li><a href="#three">Three</a></li>
        </ul>
    </nav>
</header>

<section>
    <div id="one">
        <h1>One</h1>
        <p>Text...</p>
    </div>
    <div id="two">
        <h1>Two</h1>
        <p>Text...</p>
    </div>
    <div id="three">
        <h1>Three</h1>
        <p>Text...</p>
    </div>
</section>

<footer>
</footer>
</body>

CSS：

body {
    background-color: #cf8;
}

header {
    background-color: #000;
    height: 4em;
    width: 100%;
    top: 0;
    left: 0;
    position: fixed;
}

nav ul {
    list-style: none;
}

nav ul li {
    margin-top: 0em;
    padding: 5px;    
    float: left;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

section {
    height: auto;
    width: 50%;
    margin-top: 4em;
    margin-left: 25%;
}

#one,#two,#three {
    margin-top: 1em;
}

div {
    background-color: #c00;
    height: auto;
    width: 100%;
}

footer {
    background-color: #000;
    height: 2em;
    width: 100%;
    clear: both;
}

JSFIDDLE，JSFIDDLE (Version 2)

JSFIDDLE (FULLSCREEN)，JSFIDDLE (FULLSCREEN (VERSION 2))

Answer 1

即使不使用JavaScript，您也可以完成此操作，只需在每个部分之前添加具有相同高度和负上边距的空div作为菜单。像这样：

<div id="one"></div>
<div>
   <h1>One</h1>
...

使用CSS

h1{ margin-top:0em; }
#one,#two,#three { margin-top:-4em; height:4em; }

请参阅：http://jsfiddle.net/NHtvM/7/（或全屏http://jsfiddle.net/NHtvM/7/embedded/result/）

Answer 2

我建议使用基于jQuery的解决方案（p / s：参见 [编辑＃2] 获取最终代码，其中我还检测window.location.hash属性）：< / p>

$(function() {
    // Only trigger .click() event when the link points to an internal anchor
    $("header a[href^='#']").click(function(e) {

        // Get the ID of the target
        var target = $(this).attr("href");

        // Animated scrolling to the vertical offset of the target element
        // PLUS the outer height of the <header> element
        $("html, body").animate({
            scrollTop: $(target).offset().top - $("header").outerHeight()
        });

        // Prevent default scrolling action
        // (I didn't use return false, because it stops event bubbling, too)
        e.preventDefault();
    });
});

http://jsfiddle.net/teddyrised/NHtvM/13/

[编辑]：但是，您应该注意，当访问者通过在网址中输入位置哈希来导航到特定div时，此方法不起作用（例如/page.html#one ）。

[编辑＃2]：好的，我修改了我的脚本，以便它可以检测到散列的URL（如果存在），并执行与上面相同的操作（updated Fiddle here）。例如：http://jsfiddle.net/teddyrised/NHtvM/15/show/light/#three，您希望浏览器直接导航到ID为“3”的<div>。

$(function () {
    // Scroll to function
    function scrollTo(ele) {
        $("html, body").animate({
            scrollTop: $(ele).offset().top - $("header").outerHeight()
        });
    }

    // Detect location hash
    if (window.location.hash) {
        scrollTo(window.location.hash);
    }

    // Detect click event
    $("header a[href^='#']").click(function (e) {
        var target = $(this).attr("href");
        scrollTo(target);
        e.preventDefault();
    });
});

Answer 3

表示<nav> - 标记将内联样式定义为style="z-index:1; position:absolute;"

和

表示<section> - 标记将内联样式定义为style="z-index:2; position:absolute;"

在这种情况下，导航标签上的内容将显示在导航菜单上方。

当用户单击锚链接时，某些内容位于固定标题下

3 个答案: