Scroling Issue Pro Header

[abdurrehman]

Hi,

I’m having an issue with the scrolling. I’m using a revslider on this page with Pro page option. For the slider button to scroll down to the site I’ve set that go below the slider. It goes down fine but it takes the page to the top level and hides the content below the header. Which it shouldn’t do as X does. Can you check the URL and suggest a fix for this? How to make it scroll properly and should hide it?

Thanks in advance!

[ruenel]

Hello There,

Thanks for writing in! Since you have assign the slider below your masthead settings, please enable scroll to bottom link and not a button added in the slider.

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

[abdurrehman]

Hi,

I had enabled that button but that didn’t go down just stopped with the # so then added that button. BTW, it’s not only the scroll case here. I have applied another ID on the same page and it doesn’t go to correct ID area, can you have a look here The ID is added to the heading “You’ll not pay for extra” Please check and let me know if I’m missing any things.

Thanks!

[ruenel]

Hello There,

Thanks for updating in!

Please add this custom JS code in the Theme Options > Global JS (http://prntscr.com/evswzb) or in the customizer, Appearance > Customize > Custom > Edit GLOBAL Javascript

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

  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.x-topbar').outerHeight()+$('.x-navbar').outerHeight();
  var locHref              = location.href;
  var locHashIndex         = locHref.indexOf('#');
  var locHash              = locHref.substr(locHashIndex);
  var dragging             = false;
  
  $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 ) {
    $('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*="#"]').unbind('touchend click').on('touchend click', function(e) {
      console.log($('.hm1.x-bar-fixed').outerHeight());
    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.

[abdurrehman]

Hi,

I have added this but it does work but not the way as expected. On the page load, it just hide the menu and then after that, it hides. Can you take another look? Now the code is added.

BTW, why it doesn’t work without that code?

Thanks

[lely]

Hi There,

I can see the code is there but it is not working. I noticed on the source code that the scroll bottom is added via slider and not the option under Slider Masthead > Enable Scroll Bottom Anchor. The code provided is meant to work for scroll bottom anchor option on Slider Settings: Below/Above Mast head. There’s a known issue on Pro regarding scrolling. This is related to One Page navigation feature that is under development for Pro. The code provided is a work around at the moment.

[abdurrehman]

It’s not only happening with the slider. With others too if you just check the other thing that I’d mentioned.[quote=“abdurrehman, post:3, topic:19013”]
BTW, it’s not only the scroll case here. I have applied another ID on the same page and it doesn’t go to correct ID area, can you have a look here The ID is added to the heading “You’ll not pay for extra” Please check and let me know if I’m missing any things.
[/quote]

Looking forward to hearing from you.

[lely]

Hi There,

Yes, the scroll function, like using hashtag will smooth scroll but it doesn’t take into account the height of the fixed navigation bar yet. This functionality as stated is related to one page navigation and it still under development. We’re are really sorry for the inconvenience. Based on the report on our issue tracker, there’s no fix available yet because there’s interconnected functionality that needs to be considered for the implementation.

[abdurrehman]

Hi,

Well, then nothing. BTW, the scroll is quite basic to have it working.

Along with this bug have found another regarding the header.

[lely]

Yes you are correct. Based on our timeline, the first quarter of this year will be spent fixing bugs after the release of templating functionality. We will let you know once we have an update.