nickcernis
10/16/2014 - 11:47 AM

How to modify the Parallax theme to add arrows on the homepage that autoscroll between sections

How to modify the Parallax theme to add arrows on the homepage that autoscroll between sections

/* Add this to your theme's stylesheet at /wp-content/themes/parallax-pro/style.css */
.next-pane {
    cursor: pointer;
}
// Add this to the bottom of your /wp-content/themes/parallax-pro/js/parallax.js file
// The code should go above your closing jQuery brackets, like this: http://d.pr/i/1d3vl
$(".next-pane").click(function(e) {
	var elementToScrollTo = $(this).data('goto');
	$('html, body').animate({
		scrollTop: $(elementToScrollTo).offset().top
	}, 1000);
	e.preventDefault();
});
<!-- Add this to the bottom of your home section 3 widget in WordPress's Appearance > Widgets area -->
<a class="next-pane" data-goto=".home-section-1">&uarr;</a>
<!-- Add this to the bottom of your home section 2 widget in WordPress's Appearance > Widgets area -->
<a class="next-pane" data-goto=".home-section-3">&darr;</a>
<!-- Add this to the bottom of your home section 1 widget in WordPress's Appearance > Widgets area-->
<a class="next-pane" data-goto=".home-section-2">&darr;</a>