Mobile Anchor Link Issue

Hi Yigit!
Thank you for the answer, but it partially works. Oddly, it works great if you put the url/#anchor in a browser search. The page will scroll perfectly to the right spot. If the mobile menu links are clicked, it scrolls past.

Almost there!

Hi Ismael,

Sorry about the delay. We moved the site to production and set up FTP for you to fix the mobile issue. Please let me know if there is anything else you need and how you solved the problem.

Thanks!

Hi Ismael,
No problem. That’s odd. I will need to check on this and get back to you.

Hi Rikard and Ismael,

Okay, I tested the ftp login and it is working now. Please use new credentials below.
I’d love to know how to fix for the future.

Thanks!

Hi Andy,

We are already using the latest version of Enfold (3.6.1). The issue persists. Did anyone ftp into the server to look at the avia.js file yet?

Hi Andy,

My apologies. The Enfold update alert didn’t show until now and it has been updated along with 4.6 WordPress update. Unfortunately, the issue is still there and only shows up at the mobile breakpoint. The skinner the screen the more off the anchor destination. Is there something in this js code that I can change that will fix?

// ——————————————————————————————-
// Smooth scrooling when clicking on anchor links
// todo: maybe use https://github.com/ryanburnette/scrollToBySpeed/blob/master/src/scrolltobyspeed.jquery.js in the future
// ——————————————————————————————-

(function($)
{
$.fn.avia_smoothscroll = function(apply_to_container)
{
if(!this.length) return;

var the_win = $(window),
$header = $(‘#header’),
$main = $(‘.html_header_top.html_header_sticky #main’).not(‘.page-template-template-blank-php #main’),
$meta = $(‘.html_header_top.html_header_unstick_top_disabled #header_meta’),
$alt = $(‘.html_header_top:not(.html_top_nav_header) #header_main_alternate’),
shrink = $(‘.html_header_top.html_header_shrinking’).length,
frame = $(‘.av-frame-top’),
fixedMainPadding = 0,
isMobile = $.avia_utilities.isMobile,
sticky_sub = $(‘.sticky_placeholder:first’),
calc_main_padding= function()
{
if($header.css(‘position’) == “fixed”)
{
var tempPadding = parseInt($main.data(‘scroll-offset’),10) || 0,
non_shrinking = parseInt($meta.outerHeight(),10) || 0,
non_shrinking2 = parseInt($alt.outerHeight(),10) || 0;

if(tempPadding > 0 && shrink)
{
tempPadding = (tempPadding / 2 ) + non_shrinking + non_shrinking2;
}
else
{
tempPadding = tempPadding + non_shrinking + non_shrinking2;
}

tempPadding += parseInt($(‘html’).css(‘margin-top’),10);
fixedMainPadding = tempPadding;
}
else
{
fixedMainPadding = parseInt($(‘html’).css(‘margin-top’),10);
}

if(frame.length){
fixedMainPadding += frame.height();
}

};

if(isMobile) shrink = false;

calc_main_padding();
the_win.on(“debouncedresize av-height-change”, calc_main_padding);

var hash = window.location.hash.replace(/\//g, “”);

//if a scroll event occurs at pageload and an anchor is set and a coresponding element exists apply the offset to the event
if (fixedMainPadding > 0 && hash && apply_to_container == ‘body’ && hash.charAt(1) != “!” && hash.indexOf(“=”) === -1)
{
var scroll_to_el = $(hash), modifier = 0;

if(scroll_to_el.length)
{
the_win.on(‘scroll.avia_first_scroll’, function()
{
setTimeout(function(){ //small delay so other scripts can perform necessary resizing
if(sticky_sub.length && scroll_to_el.offset().top > sticky_sub.offset().top) { modifier = sticky_sub.outerHeight() – 3; }
the_win.off(‘scroll.avia_first_scroll’).scrollTop( scroll_to_el.offset().top – fixedMainPadding – modifier);
},10);
});
}
}

return this.each(function()
{
$(this).click(function(e) {

var newHash = this.hash.replace(/\//g, “”),
clicked = $(this),
data = clicked.data();

if(newHash != ” && newHash != ‘#’ && newHash != ‘#prev’ && newHash != ‘#next’ && !clicked.is(‘.comment-reply-link, #cancel-comment-reply-link, .no-scroll’))
{
var container = “”, originHash = “”;

if(“#next-section” == newHash)
{
originHash = newHash;
container = clicked.parents(‘.container_wrap:eq(0)’).nextAll(‘.container_wrap:eq(0)’);
newHash = ‘#’ + container.attr(‘id’) ;
}
else
{
container = $(this.hash.replace(/\//g, “”));
}

if(container.length)
{
var cur_offset = the_win.scrollTop(),
container_offset = container.offset().top,
target = container_offset – fixedMainPadding,
hash = window.location.hash,
hash = hash.replace(/\//g, “”),
oldLocation=window.location.href.replace(hash, ”),
newLocation=this,
duration= data.duration || 1200,
easing= data.easing || ‘easeInOutQuint’;

if(sticky_sub.length && container_offset > sticky_sub.offset().top) { target -= sticky_sub.outerHeight() – 3;}

// make sure it’s the same location
if(oldLocation+newHash==newLocation || originHash)
{
if(cur_offset != target) // if current pos and target are the same dont scroll
{
if(!(cur_offset == 0 && target <= 0 )) // if we are at the top dont try to scroll to top or above
{
// animate to target and set the hash to the window.location after the animation
$(‘html:not(:animated),body:not(:animated)’).animate({ scrollTop: target }, duration, easing, function() {

// add new hash to the browser location
//window.location.href=newLocation;
if(window.history.replaceState)
window.history.replaceState(“”, “”, newHash);
});
}
}
// cancel default click action
e.preventDefault();
}
}
}
});
});
};
})(jQuery);