Smooth Scroll On Single page site

Hi there,

How are you implementing smooth scroll? Can you provide a link to your site?

Hi

Jquery from a previous forum post on here is placed in the wp footer hook. Menu items are # instead of http. is in the top of the content area for each section.

The site address is a locked site on WP Engine. I will send the login and address via email.

Thanks

Hi
Ok so as an update...

I have got it to scroll to a section point (changed the <a> to <a>), so that works fine. Only issue now is that the smooth scroll only works once and then jumps to next anchor point after the first scroll.

Thanks

What code are you using exactly?

This one...

<script>
jQuery(function() {
jQuery('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = jQuery(this.hash);
target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
if (target.length) {
jQuery('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
</script>

I personally use this:

jQuery(function($) {
	$('a.smooth[href*="#"]:not([href="#"])').click(function() {
		if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
			var target = $(this.hash);
			target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
			if (target.length) {
				$('html,body').animate({
					scrollTop: target.offset().top
				}, 500);
				return false;
			}
		}
	});
});

You just have to add the class smooth to your links: <a href="whatever" class="smooth">Link</a>

Didnt work at all just jumps to the #

Hmm, using it here on this site: https://generatepress.com/install-generatepress/

Where'd you add the code?

wp footer hook section

In that case you need to put the JS between script tags:

<script>
    code in here
</script>

Yip done that too

Try this:

<script>
jQuery(function($) {
	$(document).on('click', 'a[href*="#"]:not([href="#"])', function(e) {
		if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
			var target = $(this.hash);
			target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
			if (target.length) {
				e.preventDefault();
				$('html,body').animate({
					scrollTop: target.offset().top
				}, 500);
			}
		}
	});
});
</script>

Scrolls fine for the first menu item click then jumps to next item and the next and so on. Only works once...

Try the adjusted code again: https://generatepress.com/forums/topic/smooth-scroll-on-single-page-site/#post-319661