Question

我的目标是拥有一个单页网站。我目前的问题是页面顶部的导航栏。当我点击导航列表中的一个链接时，它会将我带到页面上，但它会一直过冲。

例如，如果我点击我的第二个导航$example，它会将我带到页面下方，但会在该div中的文本下方结束。第三页和第四页的情况相同：页面向下滚动的位置几乎超出了我想要结束的位置，即完全符合每页标题的开头。

HTML：

li

CSS

<body>
<div id="home">                            <!--MAIN DIV TO TAKE YOU BACK TO THE TOP OF THE HOME PAGE-->

<div id="wrapper">

<header>    

<h1>Pretend Restaurant</h1>

<nav class="nav">
<ul>


<li><a href="#home">Home</a></li> 
    <li><a href="#menu">Menu</a></li>
    <li><a href="#aboutus">About Us</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#social">Social</a></li>

</ul>

</nav>

<div id="snow"></div>

</header>

<main>

<div id="page1">

<h2 class="category">Welcome to Snow Bar</h2>





 <p><strong>Come relax and enjoy a unique and delicious treat.</strong></p><br>




</div>
<div id="page2">
    <a id="menu" class="smooth"></a>
  <h2>Menu</h2>
    <h4>Recipes</h4>

<p>list of recipes</p>



</div>



  <div id="page3">



 <a id="aboutus" class="smooth"></a>


 <h2>ABOUT US INFO GOES HERE</h2>

</div>

<div id="page4">    


 <a id="contact" class="smooth"></a>


<h2>Contact and Location</h2>

<p>Contact info goes here</p>

</div>

<div id="page5">    
 <a id="social" class="smooth"></a>
<h2>Social media information here</h2>

</div>




</div>

</body>

</main>

的jQuery

*{
box-sizing: border-box;
font-family: Georgia, Times, serif;
border-radius: 3.5px;
float: center;


}
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}

#wrapper{   background-color: #FFFFFF;
        color: #000066;
        min-width: 700px; 
        max-width: 1024px;
        margin-right: auto;
        margin-left: auto;
        padding-top: 0px;
        opacity: 0.86;
        min-height: 900px;
    }

h1 {    font-family: Georgia, Times, serif;
        background-color: darkcyan;
        color: #74ebd5;
        background-position: center;
        background-repeat: no-repeat;
        text-align: center;
        font-size: 4em;
        line-height: 80%;
        padding: 30px;


text-shadow: #CCCCCC;
        margin-bottom: 0;
    }

main {  margin-left: 100px;
        padding-bottom: 100px;
     }

.header{    background-color: #000066;
            color: #FFFFFF;
       }

ul {
    list-style-type: none;
    margin: 0;
    padding: 10px;
    overflow: hidden;
    background-color: #333;


width: 100%;

}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
     box-sizing: border-box;
}

li {
        display: inline-block;
   }


nav{    display:inline-block;
        width: 100%;
        font-weight: bold;
        background-color: grey; 



 position: sticky;
    left: 0;
    top: 0;
    z-index: 100;
    border-top: 0;
    transition: 0.3s;

}




nav ul {
    list-style: none;
    width: 100%;
    text-align: center;
    display:inline-block;
 }



 nav a{text-decoration: none;

        width: 100%} 

nav a:link{color:cyan;
}
nav a:visited{color:#6699FF;}
nav a:hover{color: gold;}

.category {
            font-weight: bold;
            background-color: #FFFFFF;
            color: darkcyan;
            text-align: center;
            font-size: 50px;
            padding-right: 50px;
            padding-left:0;
            }


#page1 { height:1000px;}
#page2 { height:1000px;}
#page3 { height:1000px;}
#page4 { height:1000px;}
#page5 { height:1000px;}

Answer 1

这正是HTML导航的工作原理。你应该使用javascript滚动到正确的位置。公式如下：parent.scrollTop = destination.offsetTop - nav.style.height)

$('.nav a').click(function(e) {
      e.preventDefault();
      var $scrooll_to_id = $(this.getAttribute('href'));
      $('html').stop(true).animate({
        scrollTop: ($scrooll_to_id.position().top - $('.nav').height())
      });
  });

这里有一个小提琴：https://jsfiddle.net/sjquno0r/1/

导航栏在我的页面上滚动太远

1 个答案: