Smooth Scroll

Hi there,

You can achieve this by added this code to the wp_footer hook in GP Hooks:

<script>
    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>

Let me know if you need more info :)

Fantastic! Thanks so much, I never would have found this on my own. :-)

I just added the anchor and the link to it and nothing else (except for the wp_footer code of course).
If you have a link to somewhere I can read about this (e g what this data-scroll-speed is for respectively how to adjust that) that would be nice, but I'm already happy with the way it is.

Great work, once again. And hopefully usefull to others as well!

All the best,
Andi

The data-scroll-speed etc.. are specific to the back to top button - those tags allow you to adjust the values for the button.

Glad I was able to help :)

There seems to be a conflict between this code an the tabs in Woocommerce. Once I add this code to the footer hook, the Description / Reviews tab panels in Woocommerce both get a display: none; and become invisible.

Is there a way to have both smooth-scroll and tabs working?

Cheers!

Hmm, are you sure it's that code? It doesn't have any hide() functions going on, so it shouldn't be setting anything to display:none.

Yes, I'm pretty sure. As soon as I disabled the footer hook woocommerce tabs came back to normal.

Any chance you can send me temporary login details so I can see the account page?: https://generatepress.com/contact/

Sure, I'm sending you a mail right now.

Very strange, can you try this: https://generatepress.com/forums/topic/smooth-scroll-on-single-page-site/#post-319645

It requires you to add the smooth class to the links you want to apply this to, which will prevent it from firing on links that shouldn't have it.

That solution works. Thanks!

You're welcome :)

Want to bounce this, Tom's first suggestion did it for me. Using SiteOrigins Pagebuilder - no conflicts.

Put the following in wp_footer hook in GP Hooks

<script>
    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>

The smooth scroll is actually a built in option now: https://generatepress.com/forums/topic/anchor-link-content-shows-up-under-sticky-menu/#post-532629

Hey, Leo!

It seems that way, yes, but using the built-in one, I wasn't able to achieve smooth scrolling, at least not with anchor-links placed with SiteOrigins Pagebuilder.

However, the code Tom provided worked 1st time :)