I cannot understand where is the problem. I wrote the code for the scroll to anchor point in code pen and all was ok, but when I copy and paste it on my project, the page doesn't scroll. I tried to look row by row, but I don't see any difference.
So, I copy all my project on codpen and here the link https://codepen.io/Alfaver/pen/goNLNQ
Below you can find the navbar with the relative anchor point. The div spacer is for create some white space between navbar and the anchor point. You can find also the jQuery code.
Thanks in advance!
//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>This does not work because of your position fixed container. To make this work you would need to change the element you want to scroll:
$('.container').stop().animate({
scrollTop: target.offset().top
}, 1000);
Your JS wants to scroll the body element, but because your of position fixed, overflow and height properties body is not taller than the viewport. So there is nothing to scroll. All the scrolling happens on the .container. So just change that part.
I think it would be better to create a solution without position fixed, but that's another question.