jquery - HTML5/CSS 滚动到 anchor 问题

Question

我不明白问题出在哪里。我在代码笔中编写了滚动到 anchor 的代码，一切正常，但是当我将它复制并粘贴到我的元素中时，页面不滚动。我尝试逐行查看，但没有发现任何差异。

所以，我将我所有的元素都复制到 codpen 上，这里是链接 https://codepen.io/Alfaver/pen/goNLNQ

您可以在下面找到带有相对 anchor 的导航栏。 div spacer 用于在导航栏和 anchor 之间创建一些空白。您还可以找到 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>

Answer 1

由于您的位置固定容器，这不起作用。要完成这项工作，您需要更改要滚动的元素:

$('.container').stop().animate({
  scrollTop: target.offset().top
}, 1000);

你的 JS 想要滚动 body 元素，但是因为你的 position fixed，overflow 和 height 属性 body 没有比视口(viewport)高。所以没有什么可滚动的。所有的滚动都发生在 .container 上。所以只需更改该部分即可。

我认为创建一个不固定位置的解决方案会更好，但这是另一个问题。