472,345 Members | 1,529 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,345 software developers and data experts.

Anchor Tag with #Name Moves Entire Window Up instead of 'Jumping'

This question was asked once on Bytes.com, but the 'asker' was Amateur to say the least and the question was never fully answered.

So here is the question. I am designing a page containing a listing of 'entries.' The title of the entry is linked and looks like shown below:

[HTML]<href="#e1" name="e1">Text</a>[/HTML]

The expected behavior of this is for the page to 'Jump' down to the element named 'e1' (in this case, itself), however, instead the entire page moves upward. The Header, navigation and everything above the element named 'e1' is now in the negative numbers.

It is as if this simple bahavior is making the element's parent container positioned absolute and then applying a negative value to the top, (example: top:-500px).

I have been making websites for quite a long time and never had any problem with this type of bahavior, nor have I ever seen this happen nor do I know what would ever cause this to happen. I have not debugged HTML to validate (the doctype is xhtml strict), as that could be the problem, but in my experience that should not effect the behavior of browser functionality.

The URL to see this quirky behavior in action is here
Very Odd Anchor Fragment Behavior
(Click on the title below the brown horizontal bar to replicate the issue)

(HTML, Doctype or CSS issue?)

I appreciate any advice you can offer, thanks for reading!
Aug 19 '08 #1
5 4673
7,435 Expert 4TB
Your link doesn't show anything.
I assume you mean <a href=... and not just <href?

From your description, it sounds like it's behaving as it should but I guess I'm misunderstanding.
Aug 19 '08 #2
Yes, I miswrote the html, my apologies, but thanks for your attn to detail!

That's weird that the link doesn't work, it works perfectly for me! Apparently my server has been encountering DNS issues, and it only resolves part of the time. But I would like to ensure you, the link is not broken.

No, it is not behaving as it should.

Correct Behavior:
1) When clicked the page should 'Jump' or 'Scroll' to the Fragment. When looking at your scrollbar the bar would be part way down the page and there would be a gap between the position of the 'bar' and the top of the scroller.

This Occurence:
1) When clicked the page does not 'jump' or 'scroll' but instead the entire page is readjusted to the top of the screen. Now, when looking at the scrollbar the bar is completely at the top of the scroller, there is no gap between the 'bar' and the top of the scroller. The top of the page is now the Fragment belonging to the href. You can NOT scroll back up, as that Fragment is NOW the TOP of the page.

Sorry if there is redundancy, but this issue is relatively difficult to explain with text, something you have to experience for yourself. Maybe a screenshot would help ... that would be my next post
Aug 19 '08 #3
7,435 Expert 4TB
Yes, I know how it's supposed to work but I wasn't sure you meant it jumped to the top. Does it happen if you don't point that href at itself?
Aug 19 '08 #4
Just tried moving the name parameter to a different element; and yes, the odd behavior is a persistent little bugger.

Here are screenshots for clarity: (you may not be able to see them due to being on the same server you cannot access, if this be the case, reply and I will upload to photo host.)



Aug 19 '08 #5
I have discovered the source of the problem, maybe this could be of help to anyone who may experience the same issue anytime in the future.

For this design I experimented with some code I found on AListApart. The code is used to make all columns equal height, so if one had more content than another, it would still be 100% high. The code for this is below:

Expand|Select|Wrap|Line Numbers
  1.     #container .column {
  2.         padding-bottom: 1001em;     
  3.         margin-bottom: -1000em;
  4.     }
This 'equal height columns' code effectively destroys the Anchor Fragment functionality.

In my case I will now have to replace this more semantic approach with the uglier approach of giving my container a background-image to simulate equal height columns; or simply find a fix for this.

Thx dr for your attempt to help me, I appreciate your repid responses, have a great one!
Aug 19 '08 #6

Sign in to post your reply or Sign up for a free account.

Similar topics

by: catyionic | last post by:
Greetings: I have numerous links on index.html...example of one..... <A HREF="stage.html#Flash" target="left">Flash</A> It connects to page...
by: Robert Mark Bram | last post by:
Hi All, We are using a scrolling iFrame to present a list of options to the user within the main page with an anchor against each option....
by: gary | last post by:
Hi, I am trying to reference an anchor in a user control with a url. This worked in 1.1 but no longer works in 2.0. The ascx control is...
by: elibol | last post by:
Hi, Is there an event that fires when the back or forward button on a browser is pressed? I need an event to fire when someone clicks the back...
by: Randy Webb | last post by:
The list below has the current section number, proposed anchor name, and then the current title of that section. Some make sense, some don't. There...
by: Bjorn Nordbo | last post by:
Hello, I have a page with a vertical list of photos separated with bits of text. Using page down to view the photos is a bit annoying as it will...
by: Prisoner at War | last post by:
Hi, People, Is it possible to have an "empty" or "dummy" <a href***without*** the browser jumping back up the page?? I have a hyperlink that...
by: praveenb000 | last post by:
Hi every one, I designed a web page, having horizontal menu using UL and LI tags; I need to be set rollover effect for a menu items. whenever...
by: teenabhardwaj | last post by:
How would one discover a valid source for learning news, comfort, and help for engineering designs? Covering through piles of books takes a lot of...
by: Kemmylinns12 | last post by:
Blockchain technology has emerged as a transformative force in the business world, offering unprecedented opportunities for innovation and...
by: Naresh1 | last post by:
What is WebLogic Admin Training? WebLogic Admin Training is a specialized program designed to equip individuals with the skills and knowledge...
by: jalbright99669 | last post by:
Am having a bit of a time with URL Rewrite. I need to incorporate http to https redirect with a reverse proxy. I have the URL Rewrite rules made...
by: antdb | last post by:
Ⅰ. Advantage of AntDB: hyper-convergence + streaming processing engine In the overall architecture, a new "hyper-convergence" concept was...
by: Matthew3360 | last post by:
Hi, I have a python app that i want to be able to get variables from a php page on my webserver. My python app is on my computer. How would I make it...
by: WisdomUfot | last post by:
It's an interesting question you've got about how Gmail hides the HTTP referrer when a link in an email is clicked. While I don't have the specific...
by: Matthew3360 | last post by:
Hi, I have been trying to connect to a local host using php curl. But I am finding it hard to do this. I am doing the curl get request from my web...
by: Oralloy | last post by:
Hello Folks, I am trying to hook up a CPU which I designed using SystemC to I/O pins on an FPGA. My problem (spelled failure) is with the...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.