Member Avatar for Reliable

Hello everyone,

I was a little embarrassed today as I was presenting my portfolio to a potential client I took him a site I created which contains a named anchor. When I pressed it it didn't go "back to top"; it stayed put.

After further investigation it furns out that it works in IE but not in Firefox. I have FF2 on my laptop since it's an older P3, and I have FF3 on my desktop. It doesn't work in either version. If I go to IE, however, it takes "back to top". Any reason why? Here is the link to the page.

  • 4 Contributors
  • 5 Replies
  • 121 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by jb1ker

Dani AI

Generated

The thread was resolved, but here are a few modern, practical notes so the same problem does not reappear. suggested adding an anchor and explained why Firefox behaved differently; confirmed the fix. For current HTML, prefer putting the fragment target on a real element with an id (and make it focusable for keyboard users) rather than depending on legacy named anchors.

A simple, clear pattern:

<header id="top" tabindex="-1">
  <h1>Our Cakes</h1>
</header>

...long page content...

<a href="#top">Back to top</a>

If you want smooth scrolling in supporting browsers, add:

html { scroll-behavior: smooth; }

If a working target still seems ignored, check these things that often get missed:

  • Disable JavaScript temporarily — some scripts intercept clicks or call preventDefault.
  • Verify the target id actually exists and is not hidden or removed by scripts.
  • Look for overflowed inner containers (overflow:auto/scroll). If the page uses an inner scroller, the browser may not scroll the viewport; you may need to scroll the container or use element.scrollIntoView().
  • Ensure the link/target are in the same browsing context (not inside different frames/iframes).
  • Avoid duplicate IDs and avoid spaces in filenames/URLs as a general best practice.

For standards and accessibility guidance see MDN on the anchor element and fragment identifiers and WebAIM on skip links:
MDN: a element
HTML Living Standard — scrolling to a fragment
WebAIM — Skip Navigation

Recommended Answers

All 5 Replies

Member Avatar for buddylee17

After the body tag, throw in <a name="top"></a> 

<body style="background-color:#4b2600;" onload="MM_preloadImages('images/home_over.gif','images/our-cakes_over.gif','images/Gourmet-Gifts_over.gif','images/Order_over.gif','images/Wholesale_over.gif','images/faq_over.jpg')">
<a name="top"></a>
Member Avatar for Reliable

Thanks. I'll try that.

Member Avatar for buddylee17

Have you tried it out yet?

Member Avatar for omol

The reason it is not working in ff is that you do not have an element named top. The reason it works in ie is because it goes to the top and scrolls down, it can;t find it so stays at the top. FF is a little more cleve and will just go straight to #top. It can't find it so it stays put. Also move your css to a seprate file that way you only have to load it once rather than on every single page. Saves both time and bandwidth.

Member Avatar for jb1ker

Seems omol solved it. Please click solved.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.