Suppose I want to create a scroll button that can navigate through multiple div elements.
Here is an example code snippet:
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div>
I know how to make the button scroll to a single div, but I'm struggling with making it scroll sequentially through multiple divs.
Below is the code for the scroll button:
<section id="scrolldownButton" class="button">
<a href=""><span></span>Scroll</a>
</section>
$(function() {
$('a[href*=#]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({ scrollTop: $($(this).attr('href')).offset().top}, 500, 'linear');
});
});
Give it a try:
$(function() {
$('a[href*=#]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 500, 'linear');
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>
<div id="5"></div>
<section id="scrolldownButton" class="button">
<a href=""><span></span>Scroll</a>
</section>