Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #660139

    Hi there,
    We are just about to launch a new one scroll page website using Enfold and everything works great except for the anchor links on mobile. The anchors scroll past the designated anchor on the phone. We are not using the LayerSlider and there are no plugins being used to interfere with the script. We did a search in your forum for similar issues, but none of the solutions appear to work for this case.

    NOTE: If makes any difference, we are using the consulting demo layout and full screen slideshow. Hiding the slideshow didn’t make any difference, so don’t think that is the issue. Everything is updated and current. We have left the anchors inside the color sections the way the demo was originally developed.

    Included is the website and credentials if you can take a look and let us know how to fix.

    Thanks!

    • This topic was modified 7 years, 8 months ago by RavenConcrete.
    #660887

    Hey RavenConcrete,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    #wrap_all {
    position: relative !important;
    }
    

    Best regards,
    Yigit

    #661464

    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!

    #662742

    Hi,

    Could you please provide the FTP details here? We would like to do a quick test in the js > avia.js file.

    Best regards,
    Ismael

    #666443

    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!

    #668329

    Hi,

    I tried to login yesterday via FTP but it’s not working. I didn’t get the chance to reply immediately because the forum is temporarily down yesterday.

    Best regards,
    Ismael

    #668680

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

    #668878

    Hi,

    Ok, please get back to us once you have checked the details and we’ll have a look.

    Regards,
    Rikard

    #670048

    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!

    #672030

    Hi,

    Please update the theme to the latest version. That should fix any issues you are currently experiencing :)

    To update to the latest version follow the simple instructions here. (Or if you want the super detailed explanation you can read this blog post)

    If that does not help, feel free to reply here and we will take a closer look at the issue.

    Best regards,
    Andy

    #672913

    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?

    #673211

    Hi,

    latest version is Enfold v.3.7.1. Let us know when you’ve updated everything and still need help.

    Best regards,
    Andy

    #673435

    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);

    #674290

    Hi,

    anchor links should work fine on mobile. There might be some corrupted files, so please delete all theme files completely via FTP, before installing a fresh copy from your themeforest account. Here is a short tutorial on how to install the theme via FTP, in case you are not sure how that works:

    Best regards,
    Andy

    #710994

    Hello there,

    I am using the newest version of enfold and I am finding that my menu links that have anchors ie: http://www.domain.com/#page are not working at all on mobile, they do nothing but reload the page as is.

    I found a previous thread that had instructions on how to edit the avia.js file but nothing changed.

    Some people are mentioning that when the mobile menu is clicked that it is scrolling near the anchor link but not to the right spot. Mine does not scroll at all.

    Any ideas??

    /*update*/ Never mind I was implementing my anchor text incorrectly and found the solution in your documentation. You guys are fab.

    • This reply was modified 7 years, 4 months ago by Briana. Reason: Found solution on my own
    #711259

    Hi,

    glad you could find the solution. Let us know in a new ticket if you have some more questions related to the theme. We are happy to assist you.

    Best regards,
    Andy

Viewing 16 posts - 1 through 16 (of 16 total)
  • The topic ‘Mobile Anchor Link Issue’ is closed to new replies.