One Page Scroll Speed too fast - need to slow it down

[JezUK]

I need to slow the speed of the menu scroll on my one-page website as it’s way too fast and defeats the purpose of the design of the site. Visitors will simply zoom past the images they are supposed to notice and enjoy.

My website is https://exteriorrenderings.co.uk and I’m NOW using Pro but before when I was on X the JS code that I was provided with by yourselves (and which worked and now doesn’t !) was;

jQuery(document).ready(function($){
$(‘a’).click(function(){
var hashindex = $(this).attr(“href”).indexOf(’#’);
var hreflen = $(this).attr(“href”).length;
var anchortag = $(this).attr(“href”).substr(hashindex, hreflen);
$(‘html, body’).animate({
scrollTop: $( anchortag ).offset().top
}, 2500);
return false;
});
});

Please can you let me know what the JS should be so that my website will scroll a lot slower when I click on a menu button ?

Many thanks.

[Prasant]

Hello @JezUK,

Thanks for asking.

I suggest you to take a look at Smooth Scroll plugin that comes bundled with Pro Theme and can be installed from Pro > Validation > Extension. Here’s resource that you can take a look at get started.

Smooth Scroll | Themeco Docs

Thanks.

[JezUK]

Thanks, but that wasn’t what I asked for. I’m not looking for a smooth scroll (with the mouse).

I’m looking for a slow menu scroll that happens when you click on a Menu button and scroll to the link on that one-pager website.

As I already mentioned, I already had this thanks to the JS that was supplied to me here on this forum by yourselves, and then when I was advised to go to Pro (by yourselves) I am now without that slow scroll because that previous JS doesn’t work with Pro.

Please can you advise regarding the JS.

Thank you.

.

[JezUK]

Please, this question has not been read properly and so was incorrectly answered by Prasant. I would appreciate your speediest response.

Thank you.

[basanta]

Hi @JezUK,

Thanks for the clarification and sorry for the confusion!

I tested the same JS code in pro and its working fine. Also tried the code in browser console on your site and it’s working fine too.
Please have a look at the screencast video.

Please add the code to Theme option -> JS let us know if that works.

jQuery(document).ready(function($){
$('a').click(function(){	
var hashindex = $(this).attr("href").indexOf('#');
var hreflen = $(this).attr("href").length;
var anchortag = $(this).attr("href").substr(hashindex, hreflen);
$('html, body').animate({
scrollTop: $( anchortag ).offset().top
}, 2500);
return false;
});
});

Thanks

[JezUK]

Thank you very much for that - it’s very nearly perfect…

… but it doesn’t take into account the Sticky Menu Bar at the top - this was the very reason I went from X to Pro (as recommended by your colleagues for exactly this reason).

I see there is ‘offset’ mentioned in that JS - would putting a value in there fix the offset issue.

Basically, the scroll is currently NOT scrolling so that the top edge of what is being scrolled to butts up with the bottom end of the menu bar.

Please can you tell me if what need is needed is to have the a value inside those parentheses (i.e. offset().top) ???

Many thanks.

[ruenel]

Hello @JezUK,

Have the JS code updated and use this:

jQuery(document).ready(function($){
	$('a').click(function(){	
		var hashindex = $(this).attr("href").indexOf('#');
		var hreflen = $(this).attr("href").length;
		var anchortag = $(this).attr("href").substr(hashindex, hreflen);
		$('html, body').animate({
			scrollTop: ( $( anchortag ).offset().top - 106 )
		}, 2500);
		return false;
	});
});

106 is the height of the navigation bar.

We would loved to know if this has work for you. Thank you.

[JezUK]

That worked like a charm, thank you so much RueNel, you’re awesome

[paul.r]

On behalf of my colleague, you;re welcome. Cheers!