html - 如何在一个页面中制作不同的部分(里面有解释)

Question

基本上，我想要实现的目标是为我的网站制作一个单页导航。基本上有一个索引页面，例如，如果有人点击“服务”，它会将他们发送到服务页面。这个“服务”页面将在一个页面中显示 5 或 6 项服务。所以基本上当用户点击导航项时，它会使用 jQuery 滚动到显示信息的 div。

现在我不希望用户看到他/她实际阅读的部分下方的部分。例如，我有一个名为 Edition 的服务和另一个 Conception。如果我正在阅读“版本”部分，我不想立即看到“概念”，除非我滚动到它。我的第一个想法是使用边距，但我的意思是如果我在 1024x768 显示器上，边距将与 1920x1080 不同。

所以基本上，我正在寻找一种方法来在一个页面上显示我的服务内容，但每个不同的服务都会显示，除非访问者滚动，否则看不到它下面的下一部分。

希望它有意义，并感谢您的支持和帮助!

Answer 1

那么，您需要定义一个导航栏类，以及一个用于存储页面每个部分的类。将部分的高度设置为 100% 将确保该部分占据用户屏幕的整个高度。请注意，这仅在 html 和正文的高度都设置为 100% 时有效。

设置导航，使其位置固定在屏幕上，并使用链接调用 javascript 函数，该函数根据链接的 ID 导航到正确的部分。

html:

<nav>
    <a class="nav" id="1" href="#">Section 1</a>
    <a class="nav" id="2" href="#">Section 2</a>
    <a class="nav" id="3" href="#">Section 3</a>
</nav>
<div class="section" id="1">
    Section 1
</div>
<div class="section" id="2">
    Section 2
</div>
<div class="section" id="3">
    Section 3
</div>

CSS:

a {
    margin: 0 10px 0 10px;
    text-decoration: none;
    color: black;
}

html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
}

nav {
    position: fixed;
    width: 100%;
    background-color: lightgrey;
    text-align: center;
    margin-bottom: 20px;
}

.section {
    height: 100%;
    padding-top: 20px;
}

js:

$('.nav').click(function() {
    var id = $(this).attr('id');
    $('html, body').animate({
        scrollTop: ($('#' + id + '.section').offset().top)
    }, 1000);
});

演示:

http://jsfiddle.net/dqcuN/2/

希望这就是您要找的。