<div class="container">
<a href="#second">Section second</a>
<section id="first">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat orci id pellentesque sollicitudin. Donec efficitur, purus quis facilisis luctus, leo neque pretium orci, ac posuere sem magna eu nunc. Fusce elementum orci et magna fermentum efficitur. In feugiat, dolor eget iaculis finibus, dolor dui malesuada nisl, eu lacinia libero dui a ipsum. Nulla facilisi. Suspendisse eu porta justo. Duis non convallis libero, ac pellentesque odio. Donec vel ultricies orci, vitae luctus justo. Phasellus id gravida massa. Maecenas non elit libero. Donec tellus augue, facilisis a vulputate et, scelerisque eget neque. Fusce vel tempus magna. Vestibulum mattis quam vitae facilisis tincidunt. Suspendisse luctus, nisl porttitor tristique consectetur, purus arcu faucibus ligula, ac facilisis neque ligula in sem. In ac lacinia lectus, dignissim molestie nunc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat orci id pellentesque sollicitudin. Donec efficitur, purus quis facilisis luctus, leo neque pretium orci, ac posuere sem magna eu nunc. Fusce elementum orci et magna fermentum efficitur. In feugiat, dolor eget iaculis finibus, dolor dui malesuada nisl, eu lacinia libero dui a ipsum. Nulla facilisi. Suspendisse eu porta justo. Duis non convallis libero, ac pellentesque odio. Donec vel ultricies orci, vitae luctus justo. Phasellus id gravida massa. Maecenas non elit libero. Donec tellus augue, facilisis a vulputate et, scelerisque eget neque. Fusce vel tempus magna. Vestibulum mattis quam vitae facilisis tincidunt. Suspendisse luctus, nisl porttitor tristique consectetur, purus arcu faucibus ligula, ac facilisis neque ligula in sem. In ac lacinia lectus, dignissim molestie nunc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat orci id pellentesque sollicitudin. Donec efficitur, purus quis facilisis luctus, leo neque pretium orci, ac posuere sem magna eu nunc. Fusce elementum orci et magna fermentum efficitur. In feugiat, dolor eget iaculis finibus, dolor dui malesuada nisl, eu lacinia libero dui a ipsum. Nulla facilisi. Suspendisse eu porta justo. Duis non convallis libero, ac pellentesque odio. Donec vel ultricies orci, vitae luctus justo. Phasellus id gravida massa. Maecenas non elit libero. Donec tellus augue, facilisis a vulputate et, scelerisque eget neque. Fusce vel tempus magna. Vestibulum mattis quam vitae facilisis tincidunt. Suspendisse luctus, nisl porttitor tristique consectetur, purus arcu faucibus ligula, ac facilisis neque ligula in sem. In ac lacinia lectus, dignissim molestie nunc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat orci id pellentesque sollicitudin. Donec efficitur, purus quis facilisis luctus, leo neque pretium orci, ac posuere sem magna eu nunc. Fusce elementum orci et magna fermentum efficitur. In feugiat, dolor eget iaculis finibus, dolor dui malesuada nisl, eu lacinia libero dui a ipsum. Nulla facilisi. Suspendisse eu porta justo. Duis non convallis libero, ac pellentesque odio. Donec vel ultricies orci, vitae luctus justo. Phasellus id gravida massa. Maecenas non elit libero. Donec tellus augue, facilisis a vulputate et, scelerisque eget neque. Fusce vel tempus magna. Vestibulum mattis quam vitae facilisis tincidunt. Suspendisse luctus, nisl porttitor tristique consectetur, purus arcu faucibus ligula, ac facilisis neque ligula in sem. In ac lacinia lectus, dignissim molestie nunc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat orci id pellentesque sollicitudin. Donec efficitur, purus quis facilisis luctus, leo neque pretium orci, ac posuere sem magna eu nunc. Fusce elementum orci et magna fermentum efficitur. In feugiat, dolor eget iaculis finibus, dolor dui malesuada nisl, eu lacinia libero dui a ipsum. Nulla facilisi. Suspendisse eu porta justo. Duis non convallis libero, ac pellentesque odio. Donec vel ultricies orci, vitae luctus justo. Phasellus id gravida massa. Maecenas non elit libero. Donec tellus augue, facilisis a vulputate et, scelerisque eget neque. Fusce vel tempus magna. Vestibulum mattis quam vitae facilisis tincidunt. Suspendisse luctus, nisl porttitor tristique consectetur, purus arcu faucibus ligula, ac facilisis neque ligula in sem. In ac lacinia lectus, dignissim molestie nunc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat orci id pellentesque sollicitudin. Donec efficitur, purus quis facilisis luctus, leo neque pretium orci, ac posuere sem magna eu nunc. Fusce elementum orci et magna fermentum efficitur. In feugiat, dolor eget iaculis finibus, dolor dui malesuada nisl, eu lacinia libero dui a ipsum. Nulla facilisi. Suspendisse eu porta justo. Duis non convallis libero, ac pellentesque odio. Donec vel ultricies orci, vitae luctus justo. Phasellus id gravida massa. Maecenas non elit libero. Donec tellus augue, facilisis a vulputate et, scelerisque eget neque. Fusce vel tempus magna. Vestibulum mattis quam vitae facilisis tincidunt. Suspendisse luctus, nisl porttitor tristique consectetur, purus arcu faucibus ligula, ac facilisis neque ligula in sem. In ac lacinia lectus, dignissim molestie nunc.
</section>
<a href="#first">Section first</a>
<section id="second">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat orci id pellentesque sollicitudin. Donec efficitur, purus quis facilisis luctus, leo neque pretium orci, ac posuere sem magna eu nunc. Fusce elementum orci et magna fermentum efficitur. In feugiat, dolor eget iaculis finibus, dolor dui malesuada nisl, eu lacinia libero dui a ipsum. Nulla facilisi. Suspendisse eu porta justo. Duis non convallis libero, ac pellentesque odio. Donec vel ultricies orci, vitae luctus justo. Phasellus id gravida massa. Maecenas non elit libero. Donec tellus augue, facilisis a vulputate et, scelerisque eget neque. Fusce vel tempus magna. Vestibulum mattis quam vitae facilisis tincidunt. Suspendisse luctus, nisl porttitor tristique consectetur, purus arcu faucibus ligula, ac facilisis neque ligula in sem. In ac lacinia lectus, dignissim molestie nunc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat orci id pellentesque sollicitudin. Donec efficitur, purus quis facilisis luctus, leo neque pretium orci, ac posuere sem magna eu nunc. Fusce elementum orci et magna fermentum efficitur. In feugiat, dolor eget iaculis finibus, dolor dui malesuada nisl, eu lacinia libero dui a ipsum. Nulla facilisi. Suspendisse eu porta justo. Duis non convallis libero, ac pellentesque odio. Donec vel ultricies orci, vitae luctus justo. Phasellus id gravida massa. Maecenas non elit libero. Donec tellus augue, facilisis a vulputate et, scelerisque eget neque. Fusce vel tempus magna. Vestibulum mattis quam vitae facilisis tincidunt. Suspendisse luctus, nisl porttitor tristique consectetur, purus arcu faucibus ligula, ac facilisis neque ligula in sem. In ac lacinia lectus, dignissim molestie nunc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat orci id pellentesque sollicitudin. Donec efficitur, purus quis facilisis luctus, leo neque pretium orci, ac posuere sem magna eu nunc. Fusce elementum orci et magna fermentum efficitur. In feugiat, dolor eget iaculis finibus, dolor dui malesuada nisl, eu lacinia libero dui a ipsum. Nulla facilisi. Suspendisse eu porta justo. Duis non convallis libero, ac pellentesque odio. Donec vel ultricies orci, vitae luctus justo. Phasellus id gravida massa. Maecenas non elit libero. Donec tellus augue, facilisis a vulputate et, scelerisque eget neque. Fusce vel tempus magna. Vestibulum mattis quam vitae facilisis tincidunt. Suspendisse luctus, nisl porttitor tristique consectetur, purus arcu faucibus ligula, ac facilisis neque ligula in sem. In ac lacinia lectus, dignissim molestie nunc.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat orci id pellentesque sollicitudin. Donec efficitur, purus quis facilisis luctus, leo neque pretium orci, ac posuere sem magna eu nunc. Fusce elementum orci et magna fermentum efficitur. In feugiat, dolor eget iaculis finibus, dolor dui malesuada nisl, eu lacinia libero dui a ipsum. Nulla facilisi. Suspendisse eu porta justo. Duis non convallis libero, ac pellentesque odio. Donec vel ultricies orci, vitae luctus justo. Phasellus id gravida massa. Maecenas non elit libero. Donec tellus augue, facilisis a vulputate et, scelerisque eget neque. Fusce vel tempus magna. Vestibulum mattis quam vitae facilisis tincidunt. Suspendisse luctus, nisl porttitor tristique consectetur, purus arcu faucibus ligula, ac facilisis neque ligula in sem. In ac lacinia lectus, dignissim molestie nunc.
</section>
</div>
.container {
background: lightpink;
display: flex;
flex-direction: column;
margin: 2em auto;
width: 50vw;
}
.container a {
text-align: center;
font-size: 1.2em;
padding: 1.5em;
}
#first ,#second {
padding: 3em;
font-size: 1.6em;
}
jQuery(function($) {
$('a[href*="#"]:not([href="#"])').click(function() {
var target = $(this.hash);
$('html,body').stop().animate({
scrollTop: target.offset().top - 100
}, 3500);
});
if (location.hash){
var id = $(location.hash);
}
$(window).on('load', function() {
if (location.hash) {
$('html,body').animate({scrollTop: id.offset().top -100}, 600)
};
});
});
This Pen doesn't use any external CSS resources.