Docs

[FonsIT]

Hi there,

In my one-page design, the automatic scrolling on mobile ends up on the wrong place, it seems offset by the height of the navbar. It seems to be the exact same problem as discussed here:

https://community.theme.co/forums/topic/mobile-single-page-nav-scrolltop-value/

However the provided javascript code doesn’t seem to work for me. Can anyone help?

My url: http://www-d-o-t-circumflex-d-o-t-com.alvast-online.nl/

Many thanks in advance!
Fons

[Lely]

Hi Fons,

Can you try using this code instead:

jQuery(document).ready(function($) {
 $('a[href*="#"]').off('touchstart click');
  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight() - 32;
  var locHref              = location.href;
  var locHashIndex         = locHref.indexOf('#');
  var locHash              = locHref.substr(locHashIndex);

  //
  // Calculate the offset height for various elements and remove it from
  // the element's top offset so that fixed elements don't cover it up.
  //

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

  //
  // Page load offset (if necessary).
  //

  $(window).load(function() {
    if ( locHashIndex !== -1 && $(locHash).length ) {
      animateOffset(locHash, 1, 'linear');
    }
  });

  //
  // 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');
      }
    }
  });

  //
  // Initialize scrollspy.
  //

  if ( $body.hasClass('x-one-page-navigation-active') ) {

    $body.scrollspy({
      target : '.x-nav-wrap.desktop',
      offset : adminbarHeight + navbarFixedTopHeight
    });
  }
});

Hope this helps.

[FonsIT]

Hi Lely,

Thanks for your response. This code also doesn’t work. Are there things I can check/try myself?

Regards,
Fons

[Paul R]

Hi Fons,

You can try this code instead.

jQuery(document).ready(function($) {
  $('a[href*="#"]').off('touchstart click');
  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight();
  var locHref              = location.href;
  var locHashIndex         = locHref.indexOf('#');
  var locHash              = locHref.substr(locHashIndex);

  var isMobile = false; //initiate as false
// device detection
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) isMobile = true;

  //
  // Calculate the offset height for various elements and remove it from
  // the element's top offset so that fixed elements don't cover it up.
  //

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

  //
  // Page load offset (if necessary).
  //

  $(window).load(function() {
    if ( locHashIndex !== -1 && $(locHash).length ) {
      animateOffset(locHash, 1, 'linear');
    }
  });

  //
  // 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');
      }
    }
  });

  //
  // Initialize scrollspy.
  //

  if ( $body.hasClass('x-one-page-navigation-active') ) {

    $body.scrollspy({
      target : '.x-nav-wrap.desktop',
      offset : adminbarHeight + navbarFixedTopHeight
    });

    //
    // Refresh scrollspy as needed.
    //

    $(window).resize(function() {
      $body.scrollspy('refresh');
    });

    var timesRun = 0;
    var interval = setInterval(function() {
      timesRun += 1;
      var newBodyHeight = $body.outerHeight();
      if ( newBodyHeight !== bodyHeight ) {
        $body.scrollspy('refresh');
      }
      if ( timesRun === 10 ) {
        clearInterval(interval);
      }
    }, 500);

  }

});

Hope that helps.

[FonsIT]

Hi Paul,

Thanks a lot!
This code works when on its own. Problem then was that it was conflicting with another “custom javascript” that I copied from another thread on this forum, that deals with the issue of automatic scrolling on touch start, instead of touch release. I did however find another script that addresses the same issue here:

https://community.theme.co/forums/topic/anchors-getting-clicked-on-touch-on-mobile/

And these two seem to work just fine together. Might be handy for someone in the future who encounters this combination. Anyway it works well now, I’m impressed with your JS magic :).

Many thanks!
Regards,
Fons

[Jade]

You’re most welcome Fons.

[Author]

Posts