[thorsteinnParticipant]

Hello

I´m using anchors to jump to different parts on a page (#nameofid) and it works as expected on desktop but on mobile the link gets clicked as soon as the finger touches it.

Normal links/buttons etc are working fine, but it appears as the smooth scrolling is waiting for a mousedown event which causes troubles when swiping on a mobile device.

I can see it´s the same behaviour as the back to top arrow so I wanted to see if anyone knew what file I needed to modify so that the smooth scrolling is only done when the finger gets released?

Thanks

[FriechModerator]

Hi There,

Thanks for writing in! Would you mind providing us the site URL so we can take a closer look.

Cheers!

[thorsteinnParticipant]

This reply has been marked as private.

[Rue NelModerator]

Hello There,

We would not recommend editing any js file as these will just be overwritten when there is an update of X. Please use this code instead in your customizer, Appearance > Customize > Custom > Javascript

jQuery(document).ready(function($) {

  //
  // Scroll trigger.
  //

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

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

});

Please let us know if this works out for you.

[thorsteinnParticipant]

Thanks for the quick reply, but unfortunately it did not fix it for me.

I get this error now “Uncaught ReferenceError: animateOffset is not defined”, and the same scrolling behavior is occurring.

Just for fun I tried changing line 200 in /themes/x/framework/js/src/site/inc/x-body-scrollspy.js

from
$(‘a[href*=”#”]’).on(‘touchstart click’, function(e) {

to
$(‘a[href*=”#”]’).on(‘touchend click’, function(e) {

But that did not change it

[thorsteinnParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi,

Please change the javascript code above to this.

jQuery(document).ready(function($) {

  function animateOffset( element, ms, easing ) {
    $('html, body').animate({
      scrollTop: $(element).offset().top - adminbarHeight - navbarFixedTopHeight + 1
    }, ms, easing);
  }

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

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

});

If that doesn’t help, please provide us you wordpress admin login so we could take a closer look.

Thanks

[thorsteinnParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi there,

I checked your website but I couldn’t find the JS code in your Customizer. However, you can replace the previous provided JS code with this and it should resolve the issue:

jQuery(document).ready(function($) {

  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight();
  
  function animateOffset( element, ms, easing ) {
    $('html, body').animate({
      scrollTop: $(element).offset().top - adminbarHeight - navbarFixedTopHeight + 1
    }, ms, easing);
  }

  //
  // Scroll trigger.
  //

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

});

Hope this helps. 🙂

Thank you.

[thorsteinnParticipant]

Awesome thanks!

Did a small modification and replaced touchend with onclick :

jQuery(document).ready(function($) {

  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight();
  
  function animateOffset( element, ms, easing ) {
    $('html, body').animate({
      scrollTop: $(element).offset().top - adminbarHeight - navbarFixedTopHeight + 1
    }, ms, easing);
  }

  //
  // Scroll trigger.
  //

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

});

Now it’s working like I wanted

[ThaiModerator]

Glad you’ve sorted it out.

You’re most welcome 🙂

[Author]

Posts