[Resolved] How to Increase Margin of Smooth Scroll Sections

Home Forums Support [Resolved] How to Increase Margin of Smooth Scroll Sections

Home Forums Support How to Increase Margin of Smooth Scroll Sections

Viewing 13 posts - 16 through 28 (of 28 total)
  • Author
    Posts
  • #1633429
    Elvin
    Staff
    Customer Support

    Yeah, not luck for me regarding the offset. How do you include the JS? I used a wp_head hook since wp_footer produced an error.

    I added it using Code Snippets plugin but a Child theme or Hook Element should work as well. I hooked it to wp_footer.

    Here’s a demo site (Offset set to 500): Smooth Scroll Vanilla JS Demo

    Click Test 2 and Test 3 on the nav bar to test.

    A wise man once said:
    "Have you cleared your cache?"

    #1633447
    George

    My link is down the page and the target div further up the page, is there something I should change to the code to make it work?

    #1633554
    Elvin
    Staff
    Customer Support

    My link is down the page and the target div further up the page, is there something I should change to the code to make it work?

    I’m not exactly sure what to suggest as the code should work as long as the elements in query goes before the script. This is the reason why it’s added on wp_footer. It’s to make sure the elements are loaded so the script finds them. Else, the querySelector will return “undefined” error on console.

    You can check the console if there are any errors.

    A wise man once said:
    "Have you cleared your cache?"

    #1634070
    George

    What I mean is that I want to smooth-scroll up the page and not down as your example.

    #1634951
    Elvin
    Staff
    Customer Support

    Ohhh yes my bad.

    I think this issue if from using getBoundingClientRect();. Let’s replace that with offsetTop.

    Try this instead:

    var smoothScrolltarget = document.querySelectorAll('a[href*="#"]:not([href="#])');
    
    for(i=0;i<smoothScrolltarget.length;i++){
        smoothScrolltarget.addEventListener("click", function(event) {
            const href = this.getAttribute("href");
    		smoothScroll(href,1000,300);
        });
    }
    
    function smoothScroll(target,duration,yOffset){
        var target = document.querySelector(target);
        var targetPosY = target.offsetTop - yOffset;
        var startPos = window.pageYOffset;
        var distance = targetPosY - startPos;
        var startTime = null;
    
        function animate(currentTime){
            if(startTime === null) startTime = currentTime; 
                var timeElapsed = currentTime - startTime;
            var run = ease(timeElapsed,startPos,distance,duration);
            window.scrollTo(0,run);
            if(timeElapsed < duration) requestAnimationFrame(animate);
        }
    
        function ease(t, b, c, d) {
            t /= d;
            t--;
            return c*(t*t*t*t*t + 1) + b;
        }
    
        requestAnimationFrame(animate);
    }

    A wise man once said:
    "Have you cleared your cache?"

    #1639677
    George

    Doesn’t seem to work. I would give you a site example but it seems I can’t do that for some reason. I am happy to leave it at that, it would be great if it was solved with vanilla JS but it’s not a show stopper.

    #1640918
    Elvin
    Staff
    Customer Support

    Strange. I’m using the exact same script on this sandbox site. Demo and it’s working fine.

    The nav menu is on the footer bar. Script is hooked to wp_footer.

    …it would be great if it was solved with vanilla JS but itโ€™s not a show stopper.

    That’ll actually going to be on one of the next updates. Tom’s trying to change all jQuery library dependent scripts to Vanilla JS for both GeneratePress and GP Premium (and GenerateBlocks + WP Show Posts but they’ll have to wait).

    Please look forward to it. Thank you.

    A wise man once said:
    "Have you cleared your cache?"

    #1640927
    George

    Yeah, I’ve heard, looking forward to it. And to be honest, jQuery is used anyway for the SmoothScroll functionality so I am not actually avoiding it anyway. Meanwhile, I made it work! All because of your great support.

    Thanks again, GP all the way!

    #1640930
    Elvin
    Staff
    Customer Support

    Nice. Glad to know you got it to work. ๐Ÿ™‚

    No problem. ๐Ÿ˜€

    A wise man once said:
    "Have you cleared your cache?"

    #1699449
    Espen

    Hi,

    I thought I’d reopen this topic since I am trying to find a Vanilla Javascript solution to smooth scroll. I’ve been experimenting with the CSS smooth scroll options but browser support is not great at this time.

    I tried Elvin’s javascript code above but Console gives an error.

    Uncaught TypeError: smoothScrolltarget.addEventListener is not a function

    Any ideas what might cause that?

    Also, I heard that Tom is working on getting rid of jQuery completely. Will there be a vanilla smoothscroll functionality in GP soon?

    Thanks a lot!

    -Espen

    #1699607
    Elvin
    Staff
    Customer Support

    Hi Espen,

    Can you tell us how you’ve added the code?

    This should be added on the footer of the site.

    A wise man once said:
    "Have you cleared your cache?"

    #1700522
    Espen

    Hi,

    I added the code to a Hook on wp_footer.

    After I tried your code, I went in search of other vanilla smooth scroll js codes and tried a whole bunch of them. With very little success. They all had issues.

    Then I stumbled on to the Zenscroll https://github.com/zengabor/zenscroll

    It’s quite small 1.4kb and while I’ve only played with it for a few hours it seems to work well so far. It also respects the CSS scroll-behavior: smooth; property, so if you have that defined and the browser supports it, it will stay out of the way.

    I think I’ll go with this for now.

    Thanks again!

    -Espen

    #1704330
    Elvin
    Staff
    Customer Support

    Nice one. Glad you got it sorted. ๐Ÿ™‚

    A wise man once said:
    "Have you cleared your cache?"

Viewing 13 posts - 16 through 28 (of 28 total)
  • You must be logged in to reply to this topic.