Search jQuery

jQuery Forum

Anchor link to different page not working (jumping back to top on load)

in Using jQuery • 8 years ago

Hello there! Been a while since I last came here, and as always I bring you a fine conundrum today:

Pretty simple:

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

For some reason every time I do a fresh reload of the page, it 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 page.

http://grupo-wm.com/

<div class="col-md-3 images_1_of_4 text-center">
<span class="bg2"><i class="fa fa-cog"></i></span>
<h5><a href="#">TURIAGRO</a></h5>
<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 Grupo WM, mas também é das mais dinâmicas.</p>
<div class="col_space2"></div>
<a href="empresas.html#turiagro" class="fa-btn btn-1 btn-1e">+ INFO</a>
</div>
(...)

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

<div class="main row">
<div class="col-md-6 content_left">
<img src="web/images/pic-turiagro.png" alt="" class="img-responsive"></div>
<div class="col-md-6 content_right">
<div id="turiagro"></div>
<h2>TURIAGRO</h2>
<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
(...)

I've looked far and wide for a fix and I have found posts with the same problem, but all attempts at fixing it through different methods haven't done anything at all.

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

Thank you in advance!

Replies(10)

watusiware

Re: Anchor link to different page not working (jumping back to top on load)

8 years ago

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

That's not actually what you have, though!

I see you actually have:

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

Try applying the ID to some visible element.

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

Check the javascript console for errors!

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

gaszpp

Re: Anchor link to different page not working (jumping back to top on load)

7 years ago

I picked up on this website after its release and I'm still battling through all the mistakes made by 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 think I can do anything about it without messing up the way it works. For instance one of the most common errors:

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

The images must have this rel atribute, otherwise it won't be grouped under the same gallery.
Also missing most alt values on the images. I'll need to get on that once I'm able.
These errors don't seem very major to be causing this problem but obviously I could be wrong here.

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

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

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

watusiware

Re: Anchor link to different page not working (jumping back to top on load)

7 years ago

I wouldn't use W3Schools as a reference, it's often inaccurate. But they seem to have 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, it is only a placeholder for a hyperlink.

Don't use <a> as an anchor (target for a link) in HTML5.

gaszpp

Re: Anchor link to different page not working (jumping back to top on load)

7 years ago

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

gautamx07

Re: Anchor link to different page not working (jumping back to top on load)

7 years ago

Somewhat inspired from THIS solution , you can try :

var s = location.hash,
offset = $(s).offset.top();
if (s) {
setTimeout(function() {
window.scrollTo(0, offset);
}, 1);
}

there could certainly be a more elegant solution to this .

gaszpp

Re: Anchor link to different page not working (jumping back to top on load)

7 years ago

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

gaszpp

Re: Anchor link to different page not working (jumping back to top on load)

7 years ago

I finally got it! Decided to turn to the page once again and try to figure out what was forcing that jump rather than adding new code. Luckily for me it was something on the HTML side, rather than the JS. Right at the top in the <head> there was this:

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

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

Sµßhrånil∂

Re: Anchor link to different page not working (jumping back to top on load)

7 years ago

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

gautamx07

Re: Anchor link to different page not working (jumping back to top on load)

7 years ago

It just scrolls to whatever cordinates you specify scrollTo .

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

gaszpp

Re: Anchor link to different page not working (jumping back to top on load)

7 years ago

Yep, the scrollTo I've used before, it was the hidreURLbar that I was having a bit of trouble finding good info on. Thank you for the help fellas!

Top Reply

Response title

Attachments

jQuery Forum

Anchor link to different page not working (jumping back to top on load)

Replies(10)

Re: Anchor link to different page not working (jumping back to top on load)

Re: Anchor link to different page not working (jumping back to top on load)

Re: Anchor link to different page not working (jumping back to top on load)

Re: Anchor link to different page not working (jumping back to top on load)

Re: Anchor link to different page not working (jumping back to top on load)

Re: Anchor link to different page not working (jumping back to top on load)

Re: Anchor link to different page not working (jumping back to top on load)

Re: Anchor link to different page not working (jumping back to top on load)

Re: Anchor link to different page not working (jumping back to top on load)

Re: Anchor link to different page not working (jumping back to top on load)

Statistics

Tags

Actions