[Resolved] How to Increase Margin of Smooth Scroll Sections

[Tom]

Hi

I’ve searched through the forums but cant find the answer. I was wondering how it’s possible to add a top margin to the smooth scroll. At the moment, the sticky header is hiding the section titles when scrolling down the page (1 page website).
This is the code I’m currently using:

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

Thanks

[Tom]

Hi there,

Take this line:

scrollTop: target.offset().top

And minus the height of your navigation:

scrollTop: target.offset().top - 60

[Tom]

hi Tom,

Didn’t seem to change anything. I even changed the margin to -500 without seeing a difference.

<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 - 500
                }, 1000);
                return false;
            }
        }
    });
</script>

[Tom]

Hmm I was using that exact code on this site until we disabled the sticky menu on scroll down.

Be sure to clear your browser cache after making the change etc..

[Tom]

works now, just had to delete cache…whoops

thanks mate

[Tom]

No problem 🙂

[Brett]

Heya,

I’m also using this code – for smooth scrolling on anchor links.

Works great when logged in as admin but just found out it does not work incognito / when not logged in.

Any of you Tom’s also having this problem? 😉

Cheers.

[Leo]

Hmm that sounds like some aggressive caching to me.

I’ve been using the exact same code on this site for the Contact button and it has been working: http://www.csmwhistler.com/

[Brett]

Ahhh cheers for pointing that out Leo,

I think we can call it Violent Caching! 😉

Note to self: Render blocking JS is not very friendly!

Like your spinning menu cog by the way!
It’s the small details eh. 😉

Thanks…

[Leo]

No problem 🙂

[George]

Is there a way to do that with Vanilla JS or maybe through a filter?

[Elvin]

Hi George,

It’s pretty tricky to directly convert the provided jQuery to Vanilla JS so I just made one from scratch. (I copied the selector tho. lol)

To be frank, this is out of our scope but coincidentally, I’ve been playing around with this for a while and I found this version of the scripts I’ve done, my most preferred:

<script>
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,200);
    });
}

function smoothScroll(target,duration,yOffset){
    var target = document.querySelector(target);
    var targetPosY = target.getBoundingClientRect().top - 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);
}
</script>

Source: https://www.youtube.com/watch?v=oUSvlrDTLi4

I’ve modified his code a bit to automate adding target instead of hardcoding it. I’ve also added the offset but most are similar to the reference/source.

[George]

Is the 200 in the smoothScroll(href,1000,200); line the offset? Doesn’t seem to be doing anything.

[Elvin]

Yes 200 is the top offset. You won’t notice the difference if the anchor it at the bottom of the page.

You can try testing it on a page with plenty of content and play around with its value. I’ve already tested this and it works well on my end. 😀

[George]

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.

[Author]

Posts