All geek questions in one place

Internal snapping Position on firefox mobile (on Android)

I have a home page with several sections - each of them is associated with the main menu:

<body> <header> <!-- nav used on all pages --> <a href="#nav" class="toggle-nav"> menu <i class="fa fa-bars"></i> </a> <nav class="main-nav" id="nav"> <a href="/#item1">Link</a> <a href="/#item2">Link</a> </nav> </header> <!-- homepage --> <main> <section id="item1">some content here </section> <section id="item2">some other content here </section> </main> </body>

(possibly) appropriate css:

 body { position: relative; overflow-x: hidden; } @media only screen and (max-width: 750px) { header .main-nav a { display: block; } .tiggle-nav { display: none; } }

The idea is that I should be able to click "Element 1" in the menu throughout the site and land in this section of the section.

This works very well, except on firefox mobile, where clicking on the internal anchor of the main page from any other internal page will load the home page somewhere between 100 and 200 pixels from the intended location.

Interestingly, if I refresh the page after the initial page is loaded, firefox mobile can find the internal anchor without problems - i.e. this is only a problem when switching from the internal page to the home page.

What's going on here? Is this because firefox mobile doesn't load CSS until it finds an internal anchor?

And what's important, how can I get firefox mobile to find the right location for the first time?

Any ideas are greatly appreciated.

Full css and html live at http://whoisnicoleharris.com

+5
source share
2 answers

In main.js, change the value 400 to 0 for the following part:

 $('#top').click(function(e) { e.preventDefault(); $('body,html').animate({scrollTop:0},400); });

After changing the code, it looks like this:

 $('#top').click(function(e) { e.preventDefault(); $('body,html').animate({scrollTop:0},0); });

Tested here seems to solve the problem, but I can’t say why exactly. This should be due to the addition of an additional 400 pixels above the anchor link.

+2
source

I did the following to reproduce the error.

I went to the connection page, and then click "Spelling." Positioning is really off. Then I turned off JavaScript to rely on the anchor. It worked correctly.

My solution is to detect a specific object on the page to decide between JavaScript scrolling and direct binding.

 if (document.getElementById('homepagebookmark')){ //do scroll } else { //leave it be }
+1
source

Source: https://habr.com/ru/post/1211112/

More articles:


All Articles