Menu
I have a homepage with a number of sections - each of these is linked to from 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) relevant 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 on 'Item 1' in the menu across the entire site, and land at that particular section of the homepage.
This works really well, except on firefox mobile, where the clicking on the homepage internal anchor link from any other internal page will result in the homepage loading anywhere between 100 and 200px away from the intended location.
Interestingly, if I refresh the page after the homepage has initially loaded, firefox mobile can find the internal anchor with no problems - i.e this is only a problem when navigating from the internal page to the homepage.
What is happening here? Does this have something to do with firefox mobile not loading CSS until after it has found the internal anchor?
And importantly, how can I make firefox mobile find the correct location first time?
Any insights very much appreciated.
Full css and html is live at http://whoisnicoleharris.com
201
In the main.js change 400 to 0 for the below part:
$('#top').click(function(e) {
e.preventDefault();
$('body,html').animate({scrollTop:0},400);
});
The code looks like below after the change:
$('#top').click(function(e) {
e.preventDefault();
$('body,html').animate({scrollTop:0},0);
});
Tested here, seems can solve the problem, but I can't say why exactly. It must due to the additional 400 pixels being added above the anchor link.
94
I have done the following to reproduce the error.
I went to the connect page, and then click on "Writing". The positioning is indeed off. I then disabled 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 vs. direct anchoring.
if (document.getElementById('homepagebookmark')){
//do scroll
} else {
//leave it be
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
