所以我试图创建一个模拟多个超链接的网站，同时将固定内容保存在外面。
到目前为止，我的主网页已经有了这个
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="CSS-JS/main.css" />
</head>
<body>
<div id="banner" class='page-padding'>
<div id="in-page-nav">
<a href="#about">About</a>
<a href="#portfolio">Portfolio</a>
<a href="#contact">Contact</a>
</div>
</div>
<div id="persistentNav" onmouseover="this.id='persistentNavHover';" onmouseout="this.id='persistentNav';">
<ul id="leftNav">
<li><a class="nav" href="#Home">Homepage</a></li>
<li><a class="nav" href="#Article1">Article 1</a></li>
<li><a class="nav" href="#Article2">Article 2</a></li>
<li><a class="nav" href="#Article3">Article 3</a></li>
</ul>
</div>
<div id="page1-background">
<div id="page1">
<a name="about"></a>
<div class="page-padding"></div>
<p>Article One</p>
</div> <!--END page1-->
</div>
<div id="page-wrap">
<div id="page2">
<a name="portfolio"></a>
<div class="page-padding"></div>
<p>Article 2</p>
<video width="100%" height="240" controls>
<source src="" type="video/mp4">
Your browser does not support the video tag.
</video>
</div> <!--END page2-->
<div id="page3">
<a name="contact"></a>
<div class="page-padding"></div>
<p>Article</p>
<div id="wizards">
<ul>
<li><a href="images/dumbledore.jpg"><img src="images/dumbledore-sm.jpg" alt="Dumbledore" /></a></li>
<li><a href="images/merlin.jpg"><img src="images/merlin-sm.jpg" alt="Merlin" /></a></li>
<li><a href="images/gandalf.jpg"><img src="images/gandalf-sm.jpg" alt="Gandalf" /></a></li>
<li><a href="images/harry-potter.jpg"><img src="images/harry-potter-sm.jpg" alt="Harry Potter" /></a></li>
</ul>
</div>
</div> <!--END page3-->
</div> <!--END page-wrap-->
<div id="footer">
<div id="none">
<a href="#about">Footer</a>
<a href="#portfolio">Footer</a>
<a href="#contact">Footer</a>
</div>
</div>
</body>
</html>
这是我的CSS文件
/*
Document : main
Created on : 19-Mar-2014, 11:16:27
Author : dan
Description:
Purpose of the stylesheet follows.
*/
*{ margin:0 auto;}
body {
margin: 0 auto;
font-family:georgia, times, serif;
height:2000px;
}
#banner {
position: fixed;
top:0px;
left:0%;
right:0px;
background: white;
height:250px;
width:1000px;
padding-left: 20px;
padding-right: 20px;
}
#nav {
margin-left:50px;
margin-top:10px;
word-spacing:20px;
}
#in-page-nav {
text-align: center;
margin-left:50px;
margin-top:45px;
word-spacing:20px;
}
#page1-background {
height: 1100px;
width: 100%;
background: url('Pictures/Middle-earth-Shadow-of-Mordor-7.jpg') no-repeat;
background-size: 100%, 100%;
padding-top: 0px;
}
#page1 {
height:1100px;
width:1000px;
background:#afc9ff;
padding-top:250px;
padding-left: 20px;
padding-right: 20px;
}
#page2 {
height:1100px;
width:1000px;
background:#777cdc;
padding-top:150px;
padding-left: 20px;
padding-right: 20px;
}
#page3 {
height:1100px;
width:1000px;
background:#9b70c0;
padding-top:150px;
padding-left: 20px;
padding-right: 20px;
}
#footer {
position:fixed;
bottom:0px;
left:0px;
background:#666;
height:70px;
width:100%;
}
.page-padding {height:90px; width:100%;}
#persistentNav {
width: 250px;
position: fixed;
left: -250px;
top: 50%;
-webkit-transition: ease 0.3s;
-moz-transition: ease 0.3s;
-o-transition: ease 0.3s;
-ms-transition: ease 0.3s;
transition: ease 0.3s;
margin-top: -245px;
background-color: rgba(0, 0, 0, 0.9);
z-index: 900;
}
#persistentNavHover {
width: 250px;
position: fixed;
top: 50%;
margin-top: -245px;
-webkit-transition: ease 0.3s;
-moz-transition: ease 0.3s;
-o-transition: ease 0.3s;
-ms-transition: ease 0.3s;
transition: ease 0.3s;
background-color: rgba(0, 0, 0, 0.9);
z-index: 900;
}
ul {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
ul {
list-style: none;
}
#leftNav li a {
color: #888;
background-color: rgba(0, 0, 0, 0.9);
width: 266px;
height: 24px;
padding-left: 24px;
padding-top: 15px;
display: block;
border-bottom: 1px solid #222;
border-right: 1px solid #222;
letter-spacing: 0.10em;
text-transform: uppercase;
font-size: 12px;
text-align: left;
overflow: hidden;
zoom: 1;
-webkit-transition: ease 0.3s;
-moz-transition: ease 0.3s;
-o-transition: ease 0.3s;
-ms-transition: ease 0.3s;
transition: ease 0.3s;
}
#nav {
text-decoration: none;
font-family: 'FontSiteSansCondensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
letter-spacing: 0.05em;
}
如果你编译它，你会看到我有3篇文章来自彼此，目前每个1100px高，每个都有链接。我想知道的是，如果我按下一个链接，它将带我到相应的文章（我可以做），但当我在该文章中滚动时，我将看到文章顶部的顶部到底部滚动的文章的底部，但没有更多。
一个例子。如果我选择1500px高的文章1，而我的屏幕是1200px高，那么我将看不到~300px。还有另外两篇文章。我想从第一条的顶部滚动到底部，以查看另一条300px的文章而不重叠到第2条。
（我知道我的代码还有其他问题，但是它有效并且问题主要是文本链接不匹配，忽略它们，因为我将继续开发时修复它们）。
答案 0 :(得分：2)
点击#page2后，您可以添加javascript来隐藏page3和article1 DIV，等等..
<li><a class="nav" href="#Article1" onclick="selectArticle1()">Article 1</a></li>
function selectArticle1(){
document.getElementById('page1').style.display = "block";
document.getElementById('page2').style.display = "none";
document.getElementById('page3').style.display = "none";
}