[Resolved] Smooth Scroll On Single page site

[TWMA Support]

Hi

Ok so I have the smooth scroll working on a site I am working on, but…

The smooth scroll only works once and then it jumps to each section. I think its to do with the /#[anchor here] after the domain address. How do I fix this?

Also I want the scrolling to stop when it gets to the top of the section. Currently it over shoots the section often covering the title (especially when using a sticky menu as this sits over the title too). How can I fix this too?

Also I am using the slide out menu on mobile so would like to disable the smooth scroll on mobile as it doesnt work quite as well in that instance.

Thanks

[Leo]

Hi there,

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

[TWMA Support]

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

[TWMA Support]

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

[Tom]

What code are you using exactly?

[TWMA Support]

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>

[Tom]

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>

[TWMA Support]

Didnt work at all just jumps to the #

[Tom]

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

Where’d you add the code?

[TWMA Support]

wp footer hook section

[Tom]

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

<script>
    code in here
</script>

[TWMA Support]

Yip done that too

[Tom]

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>

[TWMA Support]

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

[Tom]

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

[Author]

Posts