Animation scrolling is not performed at the top of the first menu item

Question

I managed to implement this snippet captured here on SO on my WordPress site: http://scentology.burnnotice.co.za/

$("#primary-menu > li > a").on("click", function(event){ event.preventDefault(); var bookMark = $(this).attr("href").substring(1,$(this).attr("href").length); bookMarkTag = $("a[name='"+ bookMark +"']"); if(bookMark !== undefined) { $('html,body').animate({scrollTop: bookMarkTag.offset().top}, Math.floor(bookMarkTag.offset().top)); } }); 

When I click on a menu item, it brings me to the desired section. The only problem is that when I click on the "Home" element, it scrolls back, but the animation doesn’t apply, so it goes too fast. How can I apply animation to a home menu item?

Answer 1

Could you try below code that works for me. you can change animateSpeed as you want

 $("#primary-menu > li > a").on("click", function(event){ event.preventDefault(); var bookMark = $(this).attr("href").substring(1,$(this).attr("href").length); bookMarkTag = $("a[name='"+ bookMark +"']"); if(bookMark !== undefined) { $('html,body').animate({scrollTop: bookMarkTag.offset().top}, Math.floor(bookMarkTag.offset().top)); } }); 

Replaced by

 $("#primary-menu > li > a").on("click", function(event){ event.preventDefault(); var bookMark = $(this).attr("href").substring(1,$(this).attr("href").length); bookMarkTag = $("a[name='"+ bookMark +"']"); var animateSpeed = 500; if(bookMark !== undefined) { $('html,body').animate({scrollTop: bookMarkTag.offset().top}, animateSpeed ); } });