The script below should scroll between sections using the mouse-wheel and up/down keyboard arrows.
The script assumes that:
- You have a main menu with links that point to each section and ‘Page scroll to id’ is enabled on them.
- Each section height is the same as viewport height.
Please note that these types of scripts depend greatly on the page layout. The code below uses a special ‘Page scroll to id’ class (_mPS2id-h) in order to work independently from most layouts. This class is related to plugin’s highlight feature, meaning that it should work in most cases.
I’ve added few comments in the code so you can tell what’s happening.
<script>
(function($){
$(window).load(function(){
/* mousewheel/keyboard section scrolling */
$(document)
//custom event
.on("scrollSection",function(e,dlt){
//sel variable is elements selector
//change to a more specific selector if needed (e.g. ".menu-item ._mPS2id-h")
var sel=$("._mPS2id-h");
if(!$("html,body").is(":animated")){ //scroll one section at a time
//set current element index (change to a more specific selector if needed)
var i=sel.index($(".mPS2id-highlight-first"));
//check first and last elements to prevent scrolling and scroll to next/previous sections
if(!(i===0 && dlt>0) && !(i===sel.length-1 && dlt<0)) sel.eq(i-dlt).trigger("click");
}
})
//mousewheel event
.on("mousewheel DOMMouseScroll",function(e){
e.preventDefault();
//send normalized mousewheel delta (-1/1) to scrollSection
$(this).trigger("scrollSection",((e.originalEvent.detail<0 || e.originalEvent.wheelDelta>0) ? 1 : -1));
})
//keyboard arrows event
.on("keydown",function(e){
var code=e.keyCode ? e.keyCode : e.which;
if(code===38 || code===40){ //up, down
e.preventDefault();
$(this).trigger("scrollSection",(code===38 ? 1 : -1));
}
});
});
})(jQuery);
</script>
This script could be placed in footer.php after wp_footer(); function or wherever your theme allows you to add custom javascript.
