How about Page-Scroll-To-ID plugin ? It works fine in my WordPress website. We can set it up easily on admin page within minutes, and we done. This plugin is what you are looking for. Please check this link up Page-Scroll-To-ID plugin tutorial
Update : if you don't want to use plug-ins, please follow these steps. We will use just purely jQuery plug-ins, and surprisingly, the code works like a charm and look simple !!!
1. Preparing your WordPress Theme
Wrap your menu with some class that we will use this one in a moment. For example:
<nav id='scrollNav'>
<?php wp_nav_menu(array('theme_location' => 'your-menu-location', 'container'=>false, 'depth'=>1) ?>
</nav>
Then add id to your specific element, but you have already add id to your footer
element, which is #footer-anchor
.
2. Coding your javascript, we will use only jQuery
(function($){
$("#scrollNav").find("a").click(function(){
var $targetElm = $($(this).attr("href"));
$('html,body').animate({scrollTop: $targetElm.offset().top},
'slow');
});
})(jQuery)
3. Enqueue your script (include your script in WordPress's way)
function your_scripts_method() {
wp_enqueue_script(
'your-script',
get_stylesheet_directory_uri() . '/js/your_script.js',
array( 'jquery' )
);
}
add_action( 'wp_enqueue_scripts', 'your_scripts_method' );
4. Run your website again
Congratulation !!!