HTML/CSS单页网站仅滚动某些div_Html_Css

HTML/CSS单页网站仅滚动某些div

html css

HTML/CSS单页网站仅滚动某些div,html,css,Html,Css,因此，我试图创建一个网站，模拟多个超链接，同时在外部保留固定内容到目前为止，我有我的主要网页这个 <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesh

因此，我试图创建一个网站，模拟多个超链接，同时在外部保留固定内容

到目前为止，我有我的主要网页这个

<!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>

如果你编译它，你会看到我有3篇文章，每个都有链接。我想知道的是，如果我按下一个链接，它会把我带到我可以做的适当的文章，但是当我在那篇文章中滚动时，我会看到文章顶部的顶部到文章底部的底部，同时滚动，但没有更多

举个例子。如果我选择文章1，它是1500像素高，我的屏幕是1200像素高，将有约300像素我没有看到。还有另外两篇文章。我想从第一篇文章的顶部滚动到底部，以查看文章的其他300px，而不与第二篇文章重叠

我知道我的代码还存在其他问题，但它是有效的，问题主要是文本链接不匹配，请忽略它们，因为我将在继续开发时修复它们

单击Article 1时，可以添加javascript以隐藏page2和page3 DIV，依此类推

<li><a class="nav" href="#Article1" onclick="selectArticle1()">Article 1</a></li>

添加此元素后，它不会将页面缩小到所选元素的高度。因此，页面仍然有3000像素左右的高度，但现在有大量的空白，因此，如果选择第一篇文章，那么其他两篇文章都是空白。知道当我选择显示哪个div时，如何抓住页面的高度并限制滚动到所选窗口，这样你就看不到空div了吗？删除高度：1100px；在第一页的背景中，那么高度将是动态的，非常感谢。现在我必须弄清楚如何使显示的屏幕/页面达到用户屏幕的高度。

<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";
}