Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

[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 15 posts - 1 through 15 (of 28 total)
  • Author
    Posts
  • #447435
    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

    GeneratePress 2.0
    GP Premium 1.5.6
    #447470
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    Take this line:

    scrollTop: target.offset().top

    And minus the height of your navigation:

    scrollTop: target.offset().top - 60

    #448131
    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>
    #448218
    Tom
    Lead Developer
    Lead Developer

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

    #448241
    Tom

    works now, just had to delete cache…whoops

    thanks mate

    #448261
    Tom
    Lead Developer
    Lead Developer
    #448343
    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.

    #448705
    Leo
    Staff
    Customer Support

    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/

    #448751
    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…

    #448754
    Leo
    Staff
    Customer Support
    #1631806
    George

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

    #1632205
    Elvin
    Staff
    Customer Support

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

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

    #1632578
    George

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

    #1633402
    Elvin
    Staff
    Customer Support

    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. πŸ˜€

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

    #1633417
    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.

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