html navigation page-jump

Question

I am creating a website with navigation that causes a page-jump. But when the page-jump event is executed my page will not load properly, and most content above the called is not loaded. Here is a copy of my navigation:

   <div id="navbar-type">
     <ul>
       <li><a href="#bear-logo" target="_self">BEAR SOUP</a></li>
       <li><a href="#fiat-logo" target="_self">FIAT MOTORS</a></li>
       <li><a href="#news-logo" target="_self">NEWSEUM</a></li>
       <li><a href="#texas-logo" target="_self">TEXAS PARKS</a></li>
       <li><a href="#zach-logo" target="_self">ZACH THEATRE</a></li>
       <li><a href="#guinness-logo" target="_self">GUINNESS</a></li>
     </ul>
   </div>

How can I fix the code so that the items above the page-jump are visible?

Thanks

Answer 1

you just need to put <a name="bear-logo"> where you want the page to scroll to when the user clicks the link and the same for the others. For example, if you wanted to scroll to the <p> tag below, you could do it like this:

<a href="#bear-logo">BEAR SOUP</a>
<!--More Code-->
<a name="bear-logo">
<p>Bear Soup:</p>

Answer 2

There doesn't seem to be any error in the displayed HTML. However, you shouldn't need to include the target for inline page anchors.

I assume you actually have the links on the page. For example, <a id="bear-logo"></a>, <a id="fiat-logo"></a>, and so on.

Moreover, the issue you describe seems to indicate that there is some invalid code elsewhere on the page (perhaps JS or jQuery). I'd recommend commenting out sections of your HTML until you isolate the interfering culprit.

BTW, have you considering using a simple jQuery script to flow the navigation to the logos instead of just abruptly jumping to them?