Anchor Link Works Once Then Wont Work Again

Hello there! Been a while since I last came here, and every bit e'er I bring you a fine conundrum today:

Pretty elementary:

Buttons on index.html links to specific parts of a different folio through anchor id'southward. Trouble is that while it is loading the new folio, it always goes to the top of it rather than the point where I want it to go.

For some reason every fourth dimension I exercise a fresh reload of the page, information technology does go to the anchor on load but only for a  second before jumping back to the top of the page. Like something is forcing the default position of the folio.

http://grupo-wm.com/

1. <div course="col-md-3 images_1_of_4 text-centre">
2.                 <bridge class="bg2"><i class="fa fa-cog"></i></span>
3.                 <h5><a href="#">TURIAGRO</a></h5>
4.                 <p grade="para">A Turiagro nasce da paixão do Empresário Angolano Rogério Martins Leonardo pelas questões agrícolas à cerca de three anos. É uma das empresas mais recentes practice Grupo WM, mas também é das mais dinâmicas.</p>
5.                     <div grade="col_space2"></div>
6.                     <a href="empresas.html#turiagro" class="fa-btn btn-one btn-1e">+ INFO</a>
7. </div>
8. (...)
   

http://grupo-wm.com/empresas.html

1. <div class="main row">
2.        <div form="col-md-6 content_left">
3.              <img src="web/images/pic-turiagro.png" alt="" class="img-responsive"></div>
4.              <div  form="col-medico-6 content_right">
5.                 <div id="turiagro"></div>
6.                 <h2>TURIAGRO</h2>
7.                 <p class="para">A Turiagro nasce da paixão do Empresário Angolano Rogério Martins Leonardo pelas questões agrícolas à cerca de 3 anos. É uma das empresas mais recentes do
   
8. (...)

I've looked far and broad for a fix and I have plant posts with the aforementioned problem, just all attempts at fixing it through different methods oasis't done anything at all.

For now at least, I am non actively using jQuery to make this link between pages as you can run across, but I'm guessing  that I tin fix my problem with it. Or maybe it is just an html/css affair? Honestly I can't tell.

Thank y'all in advance!

Replies(ten)

<div id="turiagro"></div>

That's not actually what you lot have, though!

I see you lot actually have:

    <a id="turiagro"></a>

Technically, that seems to exist legal. But it's certainly odd, and not something I've stumbled across in use before. It could exist some browsers don't actually support this unusual, semdom-used markup.

Try applying the ID to some visible element.

Too, you demand to fix the multiple errors on your pages. In fact, for the second folio, it causes some problems with the web inspector in Safari.

Check the javascript panel for errors!

FYI, I notice you are loading two copies of some CSS and JS files. Only load 1! Load either the minified or the non-minified, not both! Both is wrong, and wasteful.

I picked up on this website after its release and I'm still battling through all the mistakes made past someone else, so please bear with me here :P
A lot of those on the second page are relate to the lightbox though, I don't recollect I tin do annihilation about it without messing upwardly the way it works. For instance one of the most common errors:

" Bad value prettyPhoto[pp_gal1] for aspect rel on element a: The string prettyphoto[pp_gal1] is not a registered keyword."

The images must have this rel atribute, otherwise information technology won't be grouped under the aforementioned gallery.
As well missing nearly alt values on the images. I'll need to get on that once I'm able.
These errors don't seem very major to exist causing this trouble but obviously I could exist incorrect here.

I don't know if <a> is yet adequately used in HTML5 or non, but it still works in a lesser way .

Changing the anchor id to the section <h2>, or that sections column for example, and information technology does naught, seemingly. The anchor id (#turiagro) is not styled at all in the CSS btw. Anyway, I've cleaned up near of the code on the second folio, removed the links to the doubled CSS and JS files and the same problem persists. I don't get how this is working and and so defaulting to the superlative view...

PS: The but link I've been testing on is the TURIAGRO i, for speed mostly.

I wouldn't utilise W3Schools as a reference, information technology'south often inaccurate. But they seem to accept nailed this one:

In HTML 4.01, the <a> tag could be either a hyperlink or an anchor. In HTML5, the <a> tag is always a hyperlink, but if it has no href attribute, information technology is just a placeholder for a hyperlink.

Don't employ <a> every bit an anchor (target for a link) in HTML5.

All the same, not using <a> isn't fixing my problem. After fixing all of the major errors and Swapping the link target to i of the divs already in use nothing has inverse. Also, doing the exact same type of linking inside the same page works (moving up and down through the different sections of the 2d folio for example). I'm betting something is happening in the loading of the folio that is overriding the # link in one case the folio opens.

Somewhat inspired from THIS solution , you lot can try :

1. var s = location.hash,
2. get-go = $(s).offset.top();
3. if (southward) {
4.   setTimeout(function() {
5. 
   
6.     window.scrollTo(0, offset);
7.   }, ane);
8. }

there could certainly exist a more than elegant solution to this .

Wait, were am I supposed to utilize this code exactly? And honestly, at this point I'k not looking for an elegant solution, just  a solution at all!

I finally got it! Decided to turn to the folio in one case again and try to figure out what was forcing that jump rather than calculation new code. Luckily for me information technology was something on the HTML side, rather than the JS. Right at the top in the <caput> there was this:

1. <script type="application/10-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); part hideURLbar(){ window.scrollTo(0,one); } </script>

I'm non entirely sure what is the indicate of this (as I mentioned earlier, I'chiliad not the original developer), though information technology doesn't seem to be changing the page in anyway after removal. Hiding the URL bar? Why would you do that anyway?

That function never hides the url bar, function name misleading, that function make sure, when page loaded, user can see it from the acme, it forcefully moving the page to pinnacle.

It merely scrolls to any cordinates yous specify scrollTo  .

1. setTimeout(hideURLbar, 0); }, false); // setTimeout used to telephone call hideURLbar()
2. 
   
3. function hideURLbar(){ window.scrollTo(0,i); }  // defines where to scroll the page

Yes, the scrollTo I've used before, it was the hidreURLbar that I was having a flake of problem finding skillful info on. Thanks for the help fellas!

fieldsnov-87.blogspot.com

Source: https://forum.jquery.com/topic/anchor-link-to-different-page-not-working-jumping-back-to-top-on-load

Share this post