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">↑</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">↓</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">↓</a>