如何在单个页面中制作不同的部分(内部说明) [英] How to make different sections in a single page (explanation inside)

问题描述

基本上，我要实现的目标是为我的网站制作一个寻呼机.基本上有一个索引页面，例如，如果有人单击服务"，它将把他们发送到服务页面.此服务"页面将在一个页面中显示5或6个服务.因此，基本上，当用户单击导航项时，它将使用jQuery滚动到显示信息的div.

Basically what I'm trying to achieve is making a one pager for my website. Basically there is an index page, and, for example, if someone clicks on "Services" it will send them to the services page. This "services" page will display 5 or 6 services, all in one page. So basically when the user clicks on a navigation item, it scrolls using jQuery to the div where the information is displayed.

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

Now what I don't want is the user to see the section below the one he's / she's actually reading. So for example I have a service called Edition and another Conception. If I'm reading the "Edition" section, I don't want to see the "Conception" just right now, unless I scroll to it. My first thought was using margins, but I mean if I'm on a 1024x768 display the margin would not be the same as a 1920x1080.

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

So basically, I'm looking for a way to display my content for my services on one page, but each different service is displayed so, unless the visitor scrolls, the next section under it is not seen.

希望这很有意义，感谢您的支持和帮助！

Hope it makes sense, and thanks for any support and help!

推荐答案

好，您需要定义一个导航栏类，以及一个用于存储页面各部分的类.将部分的高度设置为100％将确保该部分占据用户屏幕的整个高度.请注意，只有将html和body的高度都设置为100％时，此方法才有效.

Well, you'd need to define a navigation bar class, and a class used to store each section of the page. Setting the height of the section to 100% will ensure that the section takes up the entire height of the user's screen. Note that this only works when the height for both the html and the body are set to 100% as well.

设置导航器，以便将其位置固定在屏幕上，并使用链接来调用JavaScript函数，该JavaScript函数根据链接的ID导航到正确的部分.

Set up your nav so the position is fixed on the screen, and use links to call a javascript function that navigates to the correct section based on the id of the link.

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/

希望这就是您想要的.

这篇关于如何在单个页面中制作不同的部分(内部说明)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！