Question

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

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

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

希望它有意义，并感谢任何支持和帮助！

Answer 1

嗯，您需要定义导航栏类，以及用于存储页面每个部分的类。将部分的高度设置为100％将确保该部分占据用户屏幕的整个高度。请注意，这仅适用于html和body的高度也设置为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/

希望这就是你要找的东西。

Answer 2

我想通过图片你上传了这就是你要找的东西：

HTML

<article>
<h1>Edition</h1>
<div>Sed ut perspiciatis unde omnis iste natus error sit </div>
</article>

CSS

html {height: 100%;}
body {margin: 0; padding: 0; height: 100%;}
article {width: 500px; height:100%; margin: 0 auto;}

http://jsfiddle.net/5HLNE/

Answer 3

您需要在HTML页面中包含分页技术，因此对于每个部分，您需要为其提供ID和超链接。

如何在一个页面中制作不同的部分（内部说明）

3 个答案: