Link to anchor scroll offset not working

[AGC]

I have set a custom id for my element. When I attempt to link to the anchor it shows up behind the fixed header menu. I searched the forum and found various other topics addressing this issue. But none of the javascript code snippets seem to work for me. This is not a one-page website. This was the most recent code I tried using.

jQuery(document).ready(function ($){
$('a[href*="#"]').off( "click touchstart");
             $('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();
                    
                   
                    $('html, body').animate({
                                scrollTop:   $($el).offset().top -58
                            }, 450);
                      return false;      
                  }
                }
              });

        });

[nabeel]

Hi @AGC,

Thank you for reaching out to us. You should try this code instead in the Theme Options > JS:

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

  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.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);
	return false;
  }


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

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


  //
  // Scroll trigger.
  //

  $('a[href*="#"]').off('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, 'xEaseInOutExpo');
		if(!$('.x-nav-wrap-mobile').hasClass('.x-collapsed')) {
			$('.x-btn-navbar').click();
		}
		return false;
      }
    }
  });
});

I checked your page and I see there are couple of JS errors in the console, so the above code might not work until you fix those errors. I believe the errors are coming from your Cornerstone’s JS section, please remove or comment out the code you’ve in there.

Don’t forget to clear all caches including your browser’s cache after making changes. Let us know how this goes!

[AGC]

I appreciate your assistance with this. We were able to get rid of the two javascript errors, but there are still a couple of “warnings” we are working on. Even with the actual errors resolved, I can’t get the offset code you shared to work.

I would be incredibly grateful if you could take another look. I am baffled as I am not currently a javascript developer.

[rad]

Hi @AGC,

May I know which button or link that we should test? I checked and there is no button that has #ticket-retail-locations. The code will enable the scrolling-to-offset of the button that has #ticket-retail-locations. But that code isn’t needed anymore since it’s been fixed.

Would you mind clarifying the issue? Or is it not related to button/link on scroll, instead it’s scroll upon page load? If yes, then it needs a different code. Please check this related thread https://theme.co/apex/forum/t/page-load-from-certain-point/29156/14

Thanks!

[AGC]

Thanks for the reply. We want to use the link I shared with you on social media to have the page load at the #ticket-retail-locations element directly. There will not be a button on the page.

[paul.r]

Hi @AGC,

Please try this code instead.

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

  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = 102;
  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);
	return false;
  }


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

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


  //
  // Scroll trigger.
  //

  $('a[href*="#"]').off('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, 'xEaseInOutExpo');
		if(!$('.x-nav-wrap-mobile').hasClass('.x-collapsed')) {
			$('.x-btn-navbar').click();
		}
		return false;
      }
    }
  });
});

If that doesn’t work, please provide us your wordpress admin login in Secure Note

@Themeco1

###Secure Notes

It is very common to need to share sensitive information with our staff such as login or FTP information. In order to keep this private, be sure to use the Secure Note button that you will find at the bottom of each reply.

[AGC]

Thank you for your assistance. This is still not working for me. I have updated the secure note with admin details.

[rad]

Hi @AGC,

I changed it to this,

jQuery ( function ( $ ) {

$( window ).load( function () {

if ( window.location.hash == "" ) return ;

  setTimeout ( function() {
    
    $('html, body').stop().animate({
      scrollTop: $( window.location.hash ).offset().top - $('#wpadminbar').outerHeight() - $('.x-navbar').outerHeight() + 1
    } );

  }, 1500 ); 
  
  });
  

} );

Please note that you can’t achieve it perfectly because of dynamically loading contents where the target offset and position changes as the content loaded.

Thanks!

[AGC]

Thank you this worked.

[AGC]

I am having another similar issue using a WP Bakery Tour element.

When I click on a section, the entire page goes up behind the fixed menu bar. I am not sure if this related. But It is not good. Can you please help me figure out the problem?

[rad]

Hi @AGC,

It’s a different issue, please check this https://theme.co/apex/forum/t/vc-tabs-scrolls-too-far-down-the-page-when-clicking-on-a-tab/21260/6, please implement just this part

jQuery( function($) {
	$('.vc_tta-tab a').on('click', function( e ){
		setTimeout( function() { 
			$('html, body').stop().stop();
		}, 100 );
	});
	$(document).ready(function() {
		$('.vc_tta.vc_general .vc_tta-panel-title > a, .vc_tta.vc_general .vc_tta-panel-title > a, .vc_tta-tab a').off('click touchstart touchend');
	});

});

Hope this helps.

[AGC]

@Rad Thanks. I inserted the code you provided in the Global JS area. However, unfortunately, it did not seem to help.

[christopher]

Hi MirajaDesign,

I went to WordPress Dashboard > X > Theme Options and added the code below:

jQuery( function($) {

$(document).on('click', 'li.vc_tta-tab a,li.vc_tta-tab,.vc_tta-panel-title', function(){
   $('html, body').stop();
});

});

Now the tab is working without autoscrolling.

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long thread makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

[AGC]

Thank you! This has solved the issues at hand.

[ruenel]

You’re welcome!
It’s good to know that it has worked for you.