我无法理解问题出在哪里。我在代码笔中编写了滚动到锚点的代码并且一切正常，但是当我将其复制并粘贴到我的项目中时，页面不会滚动。我试图逐行查看，但我没有看到任何区别。
所以，我在codpen上复制了我的所有项目，在这里链接https://codepen.io/Alfaver/pen/goNLNQ
下面你可以找到带有相对锚点的导航栏。 div spacer用于在导航栏和锚点之间创建一些空白区域。你也可以找到jQuery代码。
提前致谢！
//Scroll to Ancor Points on <li> click
$('a[href^="#"]').on('click', function(event) {
var target = $(this.getAttribute('href'));
if( target.length ) {
event.preventDefault();
$('html, body').stop().animate({
scrollTop: target.offset().top
}, 1000);
}
});html,
body {
background-color: #E8B08E;
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
a {
text-decoration: none;
color: #eee;
}
.container {
position: fixed;
top: 30px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
background-color: #eee;
box-shadow: 5px 5px 15px #333;
height: 100%;
overflow: auto;
width: 800px;
height: 0;
}
::-webkit-scrollbar {
display: none;
}
/* ===============
Clearfix
=============== */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
/* ===============
Navbar
=============== */
.navbar {
position: fixed;
top: 30px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 800px;
height: auto;
background-color: #C42527;
z-index: 10;
}
.navbar-logo {
color: #eee;
float: left;
padding: 1em 1em;
text-transform: uppercase;
font-style: italic;
}
.navbar-menu {
float: right;
margin: 0;
padding: 0;
}
.navbar-menu-item {
display: inline-block;
padding: 1em 1em;
text-transform: uppercase;
cursor: pointer;
-webkit-transition: all 0.7s;
transition: all 0.7s;
}
.navbar-menu-item:hover {
background-color: #eee;
}
.navbar-menu-item:hover a{
color: #C42527;
}
/* ===============
Slider
=============== */
#slider {
position: relative;
overflow: hidden;
width: 100%;
height: 400px;
box-sizing: border-box;
margin-top: 0;
}
#slider ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
width: 800px;
height: 400px;
background: #ccc;
text-align: center;
line-height: 300px;
background-position: center center;
background-size: cover;
}
a.control_prev, a.control_next {
position: absolute;
top: 40%;
z-index: 999;
display: block;
width: auto;
height: auto;
padding: 0% 3%;
color: #C42527;
text-decoration: none;
font-weight: 600;
font-size: 3em;
opacity: 0.8;
cursor: pointer;
}
a.control_prev:hover, a.control_next:hover {
opacity: 1;
-webkit-transition: all 0.2s ease;
}
a.control_prev {
border-radius: 0 2px 2px 0;
}
a.control_next {
right: 0;
border-radius: 2px 0 0 2px;
}
/* ===============
Services
=============== */
.services {
width: 100%;
height: 400px;
box-sizing: border-box;
margin-top: 15px;
}
.services-row {
width: 100%;
height: 50%;
}
.services-cell {
width: 33.33%;
height: 100%;
box-sizing: border-box;
float: left;
text-align: center;
}
.services-cell i {
font-size: 50px;
color: #C42527;
margin-top: 30px;
}
.services-cell p {
font-size: 20px;
font-weight: 400;
}
/* ===============
Story
=============== */
.story {
width: 80%;
height: auto;
margin: 0 auto;
text-align: center;
}
/* ===============
Footer
=============== */
.footer {
position: fixed;
bottom: 30px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
width: 800px;
height: 0;
background-color: #C42527;
box-shadow: 0px -5px 25px rgb(85, 85, 85);
z-index: 10;
}
/* ===============
Ancor Points
=============== */
.spacer {
width: 100%;
height: 10px;
margin-top: 2000px;
left: 0;
background-color: red;
}
JS<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar">
<a href="" class="navbar-logo">LOGO</a>
<ul class="navbar-menu">
<li class="navbar-menu-item"><a href="">Home</a></li>
<li class="navbar-menu-item"><a href="#ancor-story">Il B&B</a></li>
<li class="navbar-menu-item"><a href="">About</a></li>
<li class="navbar-menu-item"><a href="">Location</a></li>
<li class="navbar-menu-item"><a href="">Contacts</a></li>
</ul>
</div>
<div class="spacer"></div>
<div id="ancor-story"></div>
<div class="story">
<h1 class="story-caption">NAME OF BB</h1>
<p class="story-bb">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium saepe unde doloremque obcaecati non, fugiat inventore modi laboriosam eveniet quam soluta veniam ipsum vel quod dolorem aspernatur eos quo ex.
Sequi harum rem reiciendis minima doloribus voluptate cumque odio voluptatibus veniam maiores distinctio ratione soluta deleniti, ea ipsam, praesentium nulla mollitia repellat expedita, quidem dolore. Atque aut delectus fuga sequi!
Ex nisi totam tenetur rem architecto saepe perspiciatis asperiores officiis fuga, aliquam, nobis numquam similique illo quisquam distinctio sed est repudiandae libero consectetur! Ipsum nemo tempora saepe. Minus, quibusdam rerum!
Voluptatum iure maxime eius et vero laborum suscipit ratione porro omnis recusandae provident praesentium excepturi eveniet maiores reiciendis dicta, quasi sint aliquid! Tempora voluptates inventore ipsam soluta facilis maxime provident.
Sed itaque ea nulla odio rerum sit voluptates, cupiditate incidunt fugit repellat reprehenderit eum consequuntur suscipit doloremque quos veritatis impedit quod alias temporibus hic. Commodi nobis eos fuga est velit.
Aperiam, aliquid suscipit vero, est beatae, odio labore voluptates sit deleniti optio fugit iure tempora ipsam nostrum officia eligendi. Deleniti odit recusandae officiis aliquid dolorum, autem repellat sapiente sed rem!
Deleniti, rerum fuga exercitationem libero reprehenderit, impedit assumenda cupiditate accusantium ratione, error adipisci doloremque. Harum ipsa maiores ipsum nostrum dolorum eligendi id a incidunt optio accusantium ullam laborum, minus quas!
Facilis unde fugit quos eos mollitia vitae quaerat, at nesciunt incidunt sed maxime saepe cumque fuga quod. Itaque harum impedit non, fugit, velit sit commodi, voluptates perspiciatis aliquid tempore assumenda!
Aliquid minima voluptates odit a omnis ipsum repellendus ad illo, veniam expedita, dolorem perferendis consectetur nobis, eveniet dolorum suscipit minus inventore. Totam officiis beatae consectetur eaque quo unde. Natus, commodi?
Distinctio a dicta ipsum sint nisi vero, consequatur hic aperiam nam illum fugiat fuga. Illum suscipit quibusdam quidem debitis veniam praesentium. Error pariatur voluptas illo repudiandae sit dolorem ab soluta.
Quod facere sit quisquam veniam officiis ullam, dolorem reiciendis ipsam totam quis nemo ea provident non voluptas, aliquid veritatis. Eveniet voluptates incidunt tempora inventore repudiandae quasi amet nemo fugit suscipit!
Quae officia vel recusandae harum assumenda dolorum perferendis nobis! Similique perferendis beatae dolorum quae mollitia exercitationem officiis ullam aliquam corrupti. Et aut nobis officia vero natus eos debitis at dicta.
Eligendi eos quaerat, optio magni iste suscipit mollitia ratione libero sequi, numquam omnis reprehenderit placeat earum vitae eius, nemo corporis? Placeat, pariatur quae laboriosam minima aspernatur totam aliquid quam dolores!
Optio dolorem nam error excepturi? Neque iure at voluptates illo non consequuntur hic saepe fugiat numquam ipsa sequi mollitia magni, aspernatur enim? Soluta quam tempora consequuntur eos. Officia, non dicta.
Nisi maiores ut esse inventore explicabo accusantium perspiciatis soluta fuga, modi odit iusto eius ab ipsam omnis? Nostrum velit reprehenderit odio mollitia, neque unde beatae officiis dicta magnam aliquid ipsam!
Harum iusto provident in fugiat incidunt et beatae eveniet commodi dolore quo? Sed, blanditiis asperiores? Provident modi maxime sunt eum quia repellendus incidunt quam nihil distinctio repellat? Inventore, ut voluptatibus.
Expedita saepe accusantium ipsa temporibus optio perferendis? Sequi ex accusantium eum ipsum laboriosam alias quas ab magnam voluptatum repellat tempora, at quam asperiores sit, veritatis debitis est eos! Sit, veniam.
Laboriosam sunt nulla earum nam esse nisi adipisci, provident fugiat repellendus veniam ullam corrupti enim ipsam tenetur, accusamus quasi neque expedita odio perferendis delectus? Suscipit, corrupti? Itaque ut id omnis.
Quia adipisci maiores tenetur fugit blanditiis exercitationem aut sunt laborum reiciendis natus facilis quis quo recusandae nostrum, ullam nesciunt rerum ea consequatur, fuga at id? Culpa impedit fugit id at.
Obcaecati tempore, reprehenderit placeat repellat reiciendis alias quidem, sit quae excepturi voluptates voluptatem culpa voluptatum temporibus, accusamus est repellendus ab incidunt labore iusto harum non totam aut libero. Hic, ab!
</p>
</div>
答案 0 :(得分：0)
由于您的位置固定容器，这不起作用。要使其工作，您需要更改要滚动的元素：
$('.container').stop().animate({
scrollTop: target.offset().top
}, 1000);
你的JS想要滚动body元素，但由于你的位置固定，溢出和高度属性body不比视口高。所以没有什么可以滚动的。所有滚动都发生在.container上。所以只需改变那一部分。
我认为创建一个没有定位的解决方案会更好，但这是另一个问题。