Waypoint Auto Scroll Arrows

by David Nabb

HTML

<script src="https://use.fontawesome.com/f8da974dc1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.0/jquery.waypoints.min.js"></script>
<a href="/#section1" class="up_to_link">
  <div id="up_to" class="up_to">
    <div class="up_to_inner"><span><i class="fa fa-chevron-up"></i></span></div>
    <div class="up_to_inner_text"><span>Section1</span></div>
  </div>
</a>
<a href="/#section2" class="down_to_link">
  <div id="down_to" class="down_to">
  <div class="down_to_inner"><span><i class="fa fa-chevron-down"></i></span></div>
    <div class="down_to_inner_text"><span>Section2</span></div>
  </div>
</a>
<section id="section1" class="waypoint panel">
<div class="middle">One</div>
</section>
<section id="section2" class="waypoint panel">
<div class="middle">Two</div>
</section>
<section id="section3" class="waypoint panel">
<div class="middle">Three</div>
</section>
<section id="section4" class="waypoint panel">
<div class="middle">Four</div>
</section>

CSS

.up_to, 
.down_to {
    height: 48px;
    width: 48px;
    position: fixed;
	left: 0;
    margin: 0;
    background-color: #000;
    z-index: 1000;
    opacity: .85;
    filter: alpha(opacity = 85);
    -webkit-transition: all .4s ease 0s;
    -moz-transition: all .4s ease 0s;
    -o-transition: all .4s ease 0s;
    transition: all .4s ease 0s;
}
.up_to {
    top: calc(50vh - 24px);
}
.down_to {
    top: calc(50% + 24px);
}
#up_to.off-left,
#down_to.off-left {
	left: -50px;
	-webkit-transition: all .4s ease 0s;
    -moz-transition: all .4s ease 0s;
    -o-transition: all .4s ease 0s;
    transition: all .4s ease 0s;
}
.up_to:hover,
.down_to:hover {
    width: 144px;
    -webkit-transition: all .4s ease 0s;
    -moz-transition: all .4s ease 0s;
    -o-transition: all .4s ease 0s;
    transition: all .4s ease 0s;
}
.up_to:hover .up_to_inner span,
.down_to:hover .down_to_inner span {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transition: all .4s ease 0s;
    -moz-transition: all .4s ease 0s;
    -o-transition: all .4s ease 0s;
    transition: all .4s ease 0s;
}
.down_to:hover .down_to_inner span {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
.up_to .up_to_inner span,	
.down_to .down_to_inner span {
    display: block;
    position: absolute;
    width: 48px;
    margin-top: 15px;
    text-align: center;
    -webkit-transition: all .4s ease 0s;
    -moz-transition: all .4s ease 0s;
    -o-transition: all .4s ease 0s;
    transition: all .4s ease 0s;
}
.up_to .up_to_inner_text
.down_to .down_to_inner_text {
    width: auto;
    overflow: hidden;
}
.up_to .up_to_inner_text span,
.down_to .down_to_inner_text span {
    visibility: hidden;
    margin-left: -50px;
    text-align: right;
    line-height: 50px;
	-webkit-transition: visibility 0s ease 0s, margin .3s ease .1s;
...

JavaScript

$.fn.findNext = function( selector ){
	var set = $( selector );
	return set.eq( set.index( this ) + 1 )
};
$.fn.findPrev = function( selector ){
	var set = $( selector );
	return set.eq( set.index( this ) - 1 )
};
$(function() {
	"use strict";	
		$("a[href*='#']:not([href='#'])").click(function(event) {
			event.preventDefault();
				var target = $(this.hash);
				if (target.length) {
					var target_offset = target.offset().top;
					if (target_offset <= 20) { 
						target_offset = 0;
					};
					$('html,body').animate({
						scrollTop: target_offset + 'px'}, 1000);
				}
		});
});

$('.waypoint').waypoint({
	element: this,
	handler: function(direction) {
			if (direction === 'down') {	 
				if ($(location).attr('pathname') === '/') {
					var findHref = "a[href$='#" + this.id + "']";
					var prevWaypoint = $("#" + this.id).findPrev('.waypoint').attr('id');
					if (prevWaypoint) {
						if (prevWaypoint === "contact") {
							$('#up_to').addClass('off-left');
						} else {						  
							$('#up_to').removeClass('off-left');					   
							$('.up_to_inner_text span').text(prevWaypoint);
							$('.up_to_link').attr("href","/#" + prevWaypoint);
						}
					} else {
						$('#up_to').addClass('off-left');
					}
					var nextWaypoint = $("#" + this.id).findNext('.waypoint').attr('id');					
					if (nextWaypoint) {
						$('#down_to').removeClass('off-left');
						$('.down_to_inner_text span').text(nextWaypoint);
						$('.down_to_link').attr("href","/#" + nextWaypoint);						
					} else {  
						$('#down_to').addClass('off-left');
					}
				};
			}
		}, offset: '130'
});
$('.waypoint').waypoint({
	element: this,
	handler: function(direction) {	 
			if (direction === 'up') {
				if ($(location).attr('pathname') === '/') {
					var findHref = "a[href$='#" + this.id + "']";
					var prevWaypoint = $("#" + this.id).findPrev('.waypoint').attr('id');
					if (prevWaypoint) {
						if (prevWaypoint === "contact")...