0

I have a rather intense (yet wonderfully simple) UI in JQ where anchors are required for the UI to position.

The problem is in iOS/Chrome (webkit) and various other browsers. When an anchor is clicked about 50% of the time the a tag will trigger the Chrome URL address bar to slide down, press again and it goes away. The offset is serious no bueno.

As you would expect this messes up the UI positioning and the address bar offsetting is rather hard to predict as it is a device+screen size reaction.

I think this is a bug when the first fragment is used where there was previously none OR the change of a fragment state (new or changed). These actions, or similar, are telling the browser "a tag clicked, activate url bar".

I like this solution (CSS) but this does not address the problem as the address bar is not an element to predict against reliably (unless I want to write a foolish amount of JS for a small problem):

https://stackoverflow.com/a/13184714/860715

I am skipping the long-winded full screen API as not all mobile have that feature.

My current solution, in testing now, is to add onclick="return;" to the a tags anchoring the UI. This method seems to capture the anchor activity and skip the a tag triggering the address bar.

Thoughts on a better solution and/or possible issues in the UI for various mobile browsers.

Thx to Louys Patrice Bessette for the solution, a minor edit was required:

$(document).ready(function(){
    $("a").on("click", function(e){
      if( $(this).attr("href").substr(0,1) == "#" && $(this).attr("href").length > 1 ){
        var targetPos = $(document).find("a[name='"+$(this).attr("href").substr(1)+"']").offset().top;
        $("html, body").scrollTop(targetPos);
        e.preventDefault();  // this was moved -<-<
    }
});});
Marc
  • 1,895
  • 18
  • 25

1 Answers1

0

I would prevent the default behavior of an anchor when it's used to scroll the page.

$(document).ready(function(){
  $("a").on("click", function(e){

    // It the href attribute begins with # and is not ONLY #
    if( $(this).attr("href").substr(0,1) == "#" && $(this).attr("href").length > 1 ){

      // Prevent the default anchor behavior.
      e.preventDefault();

      // Get the offset of the target a having the name attribute matching the href of the clicked anchor.
      var targetPos = $(document).find("a[name='"+$(this).attr("href").substr(1)+"']").offset().top;

      // Scroll the page to that position.
      $("html, body").scrollTop(targetPos);
    }
  });
});
Louys Patrice Bessette
  • 33,375
  • 6
  • 36
  • 64
  • Really interesting idea. I will try this out but I think the Chrome behavior could still get in the way. I am going to drop in some JS to watch screen-vertical size as the address-bar comes and goes. Will report back as this progresses in deployments. – Marc Aug 23 '17 at 19:52
  • Isn't it better if the address bar does not "come and go" uselessly ?? ;) The above solution should do that. – Louys Patrice Bessette Aug 23 '17 at 20:09
  • 1
    Ok, got it to work, ```e.preventDefault();``` was in the wrong place, needed to follow ```scrollTop```. Tested on Chrome/Webkit iOS, Chrome OSX, FFox OSX. This solution is what I was expecting, but my problem was keeping some behavior and denying others. Good work/thx. Posted correction in in original. – Marc Aug 23 '17 at 23:44