Smoothing out the 'jump-to-section' function

[WeAreSmarticle]

I have 2 issues when clicking either buttons or links, which should automatically scroll the user down the current page, to a specific section.

1. It no longer glides smoothly, which helps the user understand what is happening. Instead, it instantly zaps to the section, which could confuse the user into thinking they’ve gone to a new page.

2. The top of the target section ends up right at the very top of the viewport, behind the sticky header that’s been assigned in Pro. So, in my case, about 100px of each target section (at the top) gets obscured by the navbar.

Obviously, it used to work perfectly pre X5 and Pro, so guessing it’s gonna get ironed out at some point. I was given some code by the group but, a) I wasn’t 100% sure how to implement and, b) thought it might be good to address this in Apex.

If you could help resolve these 2 issues – so that it glides smoothly and then the target section sits immediately below the header/nav (which is 5em high) – that’d be awesome.

The site in qustion is:

Matoke Holdings - Reactive Oxygen Technology

Username: demo
Password: 123456

The access popup might appear a second time. Just add the U+P again, then it settles. Although, it might be live by the time you read this (eek!), in which case:

Matoke Holdings - Reactive Oxygen Technology

[ruenel]

Hello There,

Thanks for posting in and the very detailed post information. I have logged in and I can confirm that the Learn more automatically jumps into the section. Could you please install Smooth Scroll plugin? Simply go to X > Overview and in the Extensions section find the Smooth Scroll plugin. To learn more about this extension, please check this out: https://theme.co/apex/forum/t/extension-smooth-scroll/86

Hope this helps. Please let us know how it goes.

[WeAreSmarticle]

Smooth Scroll is definitely not the solution for this issue, Rue. Smooth Scroll changes the entire dynamic of actual physical scrolling. And I would actually advise anyone against using it. Scrolling should feel natural and native to the touch. And X’s native/default scroll is already perfect.

Also, I think you’ve must’ve misread my question, because you only addressed 1 part of my problem. So, please let me know if I did not make myself clear.

I just want the effect (of zooming down the page) to be obvious (like it used to be) when a button or link is clicked. Like you say, it instantly jumps to the section at the moment, instead of nicely gliding down until it reaches the section.

The other issue is that when it gets to the target section, it doesn’t allow for the height of the header (built with Pro), so some of the section ends up getting hidden behind the header. Obviously we need the section to sit immediately below the header.

Here’s an example of both things working properly (on a site I haven’t updated). Go to this page on latypique.com and click the ‘Witness the Cider Revolution’ button that you see above the fold. See how it nicely glides down to the target section? That effect is what I’m after for this new Pro site. And it’s pixel-perfect on L’Atypiqe. After the scrolling process has completed, the very top of the section sits exactly below the bottom of the nav. That’s what I need.

Now if you go to the Technology page on the site that I want to fix, and click ‘Learn more,’ you’ll see the difference. But the problem isn’t exclusive to the button in the header. If you scroll down the page to the first gradient section and try clicking either of those links, you’ll see that the same probelm occurs.

If you can resolve these 2 combined issues, this post will become a good resource for many others who have also experienced the problem.

Cheers,

Mark

[christopher]

Hi there,

The smooth scroll functionality which you have described is not available in Pro unfortunately. It is only available on pages that have the legacy header and not the ones made with Header Builder.

We already added this as a Feature Request in our internal system.

Thank you for your understanding and patience.

[eskimobryan]

Am encountering this issue as well. Hope that awesome features seen in the pre-pro days will be restored.

[WeAreSmarticle]

I’m now using a workaround for smoothness (courtesy of Conor and Michael in the FB group). See below. I still don’t have a solution for it over-scrolling behind the header though.

Just paste this code in the Global JS, and target sections as usual (with #x-section-1, for example).

// handle links with @href started with '#' only
jQuery(function($){
  
  $(document).on('click', 'a[href^="#"]', function(e) {
    // target element id
    var id = $(this).attr('href');

    // target element
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }

    // prevent standard hash navigation (avoid blinking in IE)
    e.preventDefault();

    // top position relative to the document
    var pos = $id.offset().top;

    // animated top scrolling
    $('body, html').animate({scrollTop: pos}, 1000, 'easeInOutQuart');
});
  
});

[paul.r]

Hi,

Kindly change your code to this.

jQuery(function($){
  $('a[href*="#"]').off('touchend click');
  $('a[href*="#"]').on('touchend click', function(e) { 
    e.preventDefault();
    var id = $(this).attr('href');   
    var $id = $(id);
    if ($id.length === 0) {
        return;
    }
    
    var pos = $id.offset().top - 70;
    $('body, html').animate({scrollTop: pos}, 1000, 'easeInOutQuart');
    return false;
});
});

Where 70 is the height of your fixed header.

Hope that helps.

[WeAreSmarticle]

That’s awesome. Thanks, Paul. You and Michael in the FB group pretty much said the same thing at the same time.

Can I just clarify one thing though, please? Did you mean 70 was the height of my specific header on matokeholdings.com? Or were you generalising at that point? The reason I ask is that, in the Header Builder, the Bar is set at 5em. In terms of pixels, that’s 5 x 16(px), right? If I’m right in thinking that 1em = 16px, that is. If so, I assume 80 would be the number I should use. However, both 70 and 80 leave a small gap between the header and the target section… and I can’t work out why!?

Either way, this is a massive improvement since my first post.

Thanks again.

[christopher]

Hi there,

Yes, you are right it was a general suggestion. Whatever your header height is, you use that number.

But please kindly consider all of the code above is a temporary workaround and may not work on all cases.

Thank you.

[matthijssmeets]

Hi @paul.r,

I would really like to have the code for a left layout header. Hope you can help.

URL: https://staging.meintjebleeker.nl

[ruenel]

Hello @matthijssmeets,

Thanks for updating this thread. To make it work for your site, please make use of this code instead:

jQuery(function($){
  $('a[href*="#"]').off('touchend click');
  $('a[href*="#"]').on('touchend click', function(e) { 
    e.preventDefault();
    var id = $(this).attr('href').split("#").slice(-1)[0];;   
    var theid = $("#" + id);
    console.log(theid);
    if (theid.length === 0) {
        return;
    }
    
    var pos = theid.offset().top;
    $('body, html').animate({scrollTop: pos}, 1000, 'easeInOutQuart');
    return false;
  });
});

We would loved to know if this has work for you. Thank you.

[matthijssmeets]

Brilliant! Thanks @RueNel works like a charm.

[rad]

You’re more welcome!