[Resolved] Smooth Scroll

Home Forums Support [Resolved] Smooth Scroll

Home Forums Support Smooth Scroll

Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
    Posts
  • #179172
    Andi

    Hi Tom,

    I have a hopefully short and easy question:
    On my website andisaitenhieb.de I added a few scroll down links to the top.
    Now I thought it would be way cool if the user could scroll as slow and smoothly down as he scrolls up when hitting the themes up-arrow.

    I checked your arrow with chrome inspector and added

    data-scroll-speed=”400″ data-start-scroll=”300″

    to the last link “Workshop- & Konzerttermine” but that didn’t do anything:
    Workshop- & Konzerttermine

    I never did that kind of thing before and I’m no HTMl / CSS expert. I thought you have programmed something into the theme and I could re-use that to my other scroll link also?
    Hopefully there’s an easy trick I can add that to my links. 🙂

    (I also checked here in the forum, but the plugin recommended hasn’t been updated in 2 years. Also I don’t want to add another plugin.)

    Thanks a lot,
    Andi

    #179256
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #179307
    Andi

    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

    #179323
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #342588
    Branislav Pakic

    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!

    #342739
    Tom
    Lead Developer
    Lead Developer

    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.

    #342798
    Branislav Pakic

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

    #342867
    Tom
    Lead Developer
    Lead Developer

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

    #342895
    Branislav Pakic

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

    #342973
    Tom
    Lead Developer
    Lead Developer

    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.

    #342982
    Branislav Pakic

    That solution works. Thanks!

    #343163
    Tom
    Lead Developer
    Lead Developer

    You’re welcome 🙂

    #542823
    Jaakko Pöntinen

    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>
    #543038
    Leo
    Staff
    Customer Support
    #545689
    Jaakko Pöntinen

    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 🙂

Viewing 15 posts - 1 through 15 (of 18 total)
  • You must be logged in to reply to this topic.