Onepage Nav scrollTo not working

Support
#1

Hi,

I have a selfmade menu with anchor links on my development site and it should scroll to the related sections.
See here: http://solovino.com/weine/

In the beginning the page automatically scrolled smoothly to the sections after clicking a link like http://solovino.com/weine#sierra-cantabria
Strangely this function stopped working out of the blue and now the page just loads the anchor link.

I hope you can help me.

Problem with onePager!
#2

Hi There,

Instead of using on your HREF the full url :

http://solovino.com/weine#teso-la-monja

use just :

#teso-la-monja

Hope it helps!

#3

Hey Joao,

now the anchor jumps to desired section but the smooth scroll is missing. And an offset is added to it.
Could you please take a look at this issue? I added my login credentials.

Thanks and best regards

#4

Hello There,

Thank you for getting back to us. I can confirm that this is a bug with the scroll to section when custom header is active. To resolve this, please add this JS code in the Theme Options > Global JS (http://prntscr.com/evswzb) or in the customizer, Appearance > Customize > Custom > Edit GLOBAL Javascript

// Setup
// =============================================================================

jQuery(function($) {

  var $body                = $('body');
  var adminbarHeight       = $('#wpadminbar').outerHeight();

  if ( $body.hasClass('.x-navbar-fixed-top-active') ) {
    var navbarFixedTopHeight = $('.x-navbar-fixed-top-active .x-navbar').outerHeight();   
  } else {
    var navbarFixedTopHeight = $('.x-masthead').outerHeight();
  }
  
  var locHash              = null;
  var dragging             = false;

  var locHashIndex = location.href.indexOf('#');
  if ( -1 !== locHashIndex ) {
    locHash = location.href.substr(locHashIndex).split('/')[0];
  }

  $body.on('touchmove', function() {
    dragging = true;
  } );

  $body.on('touchstart', function() {
    dragging = false;
  } );


  //
  // 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 ( ! element ) {
      return;
    }

    try {
      var $el = $(element);
    } catch(error) {
      // abort on invalid selectors. see #610
      return;
    }

    if ( ! $el || 0 == $el.length ) {
      return;
    }

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

  }


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

  $(window).load(function() {
    animateOffset(locHash, 1, 'linear');
  });


  //
  // Scroll trigger.
  //

  $('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();

        if (dragging) {
          return;
        }

        animateOffset($el, 850, 'easeInOutExpo');
      }
    }
  });

});

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

#5

Thanks! Everything works fine now

#6

You’re welcome! :slight_smile: