I am trying to build a one-page website but, I need the site to scroll down smooth as in scroll down slowly.
Do i need to use special headers or functions?
thanks!
My current code looks like this:
<section id="section01" style="width: 100%; height: 80%">
<h1>Scroll Down Button #1</h1>
<a href="#section02">Scroll</a>
</section>
<section id="section02" style="width: 100%; height: 100%">
<h1>Scroll Down Button #2</h1>
<a href="#section01">Scroll</a>
</section>
jQuery animate() plays nice for this. Snippet below:
// Select all links with hashes
$('a[href*=#]:not([href=#])').click(function() {
// On-page links
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') ||
location.hostname == this.hostname) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist? if so, animate
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
//Prevent default
return false;
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="section01" style="width: 100%; height: 80%">
<h1>Scroll Down Button #1</h1>
<a href="#section02">Scroll</a>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam doloribus, quis, fugiat est odio, quas natus nam veritatis non explicabo voluptatibus? Voluptatibus accusantium dolores exercitationem provident nesciunt fuga, consequuntur vero! loremLorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam doloribus, quis, fugiat est odio, quas natus nam veritatis non explicabo voluptatibus? Voluptatibus accusantium dolores exercitationem provident nesciunt fuga, consequuntur vero! loremLorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam doloribus, quis, fugiat est odio, quas natus nam veritatis non explicabo voluptatibus? Voluptatibus accusantium dolores exercitationem provident nesciunt fuga, consequuntur vero! loremLorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam doloribus, quis, fugiat est odio, quas natus nam veritatis non explicabo voluptatibus? Voluptatibus accusantium dolores exercitationem provident nesciunt fuga, consequuntur vero! loremLorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam doloribus, quis, fugiat est odio, quas natus nam veritatis non explicabo voluptatibus? Voluptatibus accusantium dolores exercitationem provident nesciunt fuga, consequuntur vero! loremLorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam doloribus, quis, fugiat est odio, quas natus nam veritatis non explicabo voluptatibus? Voluptatibus accusantium dolores exercitationem provident nesciunt fuga, consequuntur vero! lorem</p>
</section>
<section id="section02" style="width: 100%; height: 100%">
<h1>Scroll Down Button #2</h1>
<a href="#section01">Scroll</a>
</section>