1

我正在尝试创建一个锚链接，因此当用户单击菜单上的某个项目时，它会转到指定的目的地。我的菜单包含三项（一、二、三）。例如，当我单击“三”时，它会跳转到“三”，但其标题位于标题下方。我怎样才能防止这种情况？我希望用户能够看到标题。请注意，我希望我的标题是固定的，并且我希望内容在标题后面滚动。

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 (版本 2)

JSFIDDLE（全屏），JSFIDDLE（全屏（版本 2））

4

3 回答 3

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/）

于 2013-10-19T22:45:40.527 回答
1

我建议改用基于 jQuery 的解决方案（p/s：请参阅[Edit #2]以获取最终代码，我还检测到该window.location.hash属性）：

$(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/

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

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

$(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();
    });
});
于 2013-10-20T14:32:33.213 回答
0

对于<nav>-tag 将内联样式定义为style="z-index:1; position:absolute;"

和

对于<section>-tag 将内联样式定义为style="z-index:2; position:absolute;"

在这种情况下，部分-tag 中的内容将在导航菜单上方可见。

于 2013-10-20T18:09:17.380 回答