[Resolved] How to Increase Margin of Smooth Scroll Sections

[Elvin]

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.

[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?

[Elvin]

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.

[George]

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

[Elvin]

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[i].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);
}

[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.

[Elvin]

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.

[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!

[Elvin]

Nice. Glad to know you got it to work. 🙂

No problem. 😀

[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

[Elvin]

Hi Espen,

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

This should be added on the footer of the site.

[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

[Elvin]

Nice one. Glad you got it sorted. 🙂

[Author]

Posts