Docs

[lexopa]

Hi

I’m hoping to get a good answer for this and not a request for my wordpress install and u/p because well, they all behave the same from what I’ve tested.

Essentially you have a link or button with href=”#gohere”. Then somewhere you have a div w id=”gohere”.

On mobile (iOS not sure about Chrome on Android) the second, and I mean the SECOND you touch on that link/button it starts to Smoothscroll to the anchor. And yes that’s what it’s supposed to do, however it does not distinguish between a drag or tap and hold etc, so the issue is the user is scrolling through the website, inevitably touches one of your link/buttons and immediately the scrolling action begins.

That’s is not good for UX on mobile whatsoever. And by the way regular links behave completely differently, they don’t immediately go to the link. You have to be deliberate in touching the link before the request happens.

So the question is, is there a fix? I’m assuming no, so is there a way to disable onpage smooth scrolling to anchors? I use a child theme if that helps. And I just need to be pointed in the right direction is all.

Thanks.

[Nabeel A]

Hi there,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[lexopa]

Again, this happens with ANY x theme installation, its the default behaviour to smooth scroll to an internal link.

But here’s one I’m working with currently:
http://northshoreit.me/services/residential-it-services/

All the Learn More links and the buttons for Free consultation in the middle of the page, are internal page links.

Now remember, you want to check this on iOS or Chrome/Android (I checked does the same thing). Try scrolling through the page, and you’ll see the milisecond you approach the link, it starts smooth scrolling. Thats no good because maybe the user was just tap and dragging to scroll through the page and didn’t deliberately tap the internal link.

How do we disable smooth scrolling on internal links? Also I tried to use JS to preventDefault and stopPropagation but it still goes so I’m not sure when that gets applied.

[lexopa]

Also here’s two more dev sites to prove my point

With X theme smoothscroll, on mobile, you nearly touch the INTERNAL LINK, and the scrolling action begins. You can’t even tap and hold it.

http://scratch1.northshoreit.me/

Without X theme (traditional internal link), works as expected
http://scratch2.northshoreit.me/

I want to know how to disable smooth scrolling on mobile. I hope I’m clear enough by now.

[Joao]

Hi There,

Thanks for writing in!

Can you please try to do this to see if you get better results?

Set the Smooth Scroll to 60 step and 500 scroll speed, feel free to adjust this if its not the effect you desire.

If that doesnt work for you, please refer to this topic to see how to disable it on mobile devices.

https://community.theme.co/forums/topic/cannot-scroll-on-windows-phone-with-ie/

Hope it helps, Cheers!

Joao

[lexopa]

Here’s the offending function from x-body.js:

  //
  // Scroll trigger.
  //

  $('a[href*="#"]').on('touchstart click', function(e) {
    href        = $(this).attr('href');
    notComments = href.indexOf('#comments') === -1;
    if ( href !== '#' && notComments ) {
      var theId = href.split('#').pop();
      var $el   = $('#' + theId);
      if ( $el.length > 0 ) {
        e.preventDefault();
        animateOffset($el, 850, 'easeInOutExpo');
      }
    }
  });

If we remove touchstart from here problem is solved. >> $(‘a[href*=”#”]’).on(‘touchstart click’, function(e) {

I guess the question is, can JS files be overwritten in child themes? Or what would be the recommended way to override that event handler?

This to me is a huge oversight on mobile. There is NO REASON why an internal link should jump to its destination on immediate touch event, because the sure could still be scrolling.

[lexopa]

Also is there a way to run X theme in “debug” mode where all the CSS and JS is unminified?

[Rue Nel]

Hello There,

By default the JS and CSS loaded in the site is the minified version for performance purposes. Regretfully there is no option that you load the unminified version. We do not recommend any modifications.

In order to override the JS code, please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

(function($){
  //
  // Scroll trigger.
  //

  $('a[href*="#"]').on('touchstart', function(e) {
    e.preventDefault();
  });

  $('a[href*="#"]').on('touchend click', function(e) {
    href        = $(this).attr('href');
    notComments = href.indexOf('#comments') === -1;
    if ( href !== '#' && notComments ) {
      var theId = href.split('#').pop();
      var $el   = $('#' + theId);
      if ( $el.length > 0 ) {
        e.preventDefault();
        animateOffset($el, 850, 'easeInOutExpo');
      }
    }
  });
})(jQuery);

Hope this may help.

[Author]

Posts