- This topic has 18 replies, 3 voices, and was last updated 8 years, 3 months ago by
.
-
Posts
-
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
Customer Support
Hi there,
How are you implementing smooth scroll? Can you provide a link to your site?
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
Lead Developer
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
- You must be logged in to reply to this topic.
