Hello,
I am trying to create 3 scroll anchor links to link to the next section on a specific page.
I am using the following code and injecting it into the page header, but it only creates the anchor link from section 1 to 2, could someone help me figure out how to link section 2 to section 3 and from section 3 to back to top?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
$("#page>article>section:first-child").append('<a href="#" class="next-section"><i class="fa fa-angle-down" aria-hidden="true"></i></a>');
$('a.next-section').on('click', function(e) {
e.preventDefault();
$('html, body').animate({ scrollTop: $(" #page>article>section:first-child").next().offset().top}, 500, 'linear');
});
});
</script>
<style>
article>section:first-child a.next-section {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
z-index: 2;
display: inline-block;
color: #fff;
font : normal 400 20px/1 'Josefin Sans', sans-serif;
letter-spacing: .1em;
text-decoration: none;
transition: opacity .3s;
animation: fade_move_down 4s ease-in-out infinite;
background-color: rgba(0,0,0,0.5);
width: 150px;
padding-bottom: 20px;
text-align: center;
font-size: 50px;
}
</style>
Many thanks!