上下滚动页面JavaScript导航

Question

I have up and down arrows on the right hand side of each section where if you click them it scrolls either up or down sections.

<div class="next_section"><a id="after_contact"><img src="<?php echo get_stylesheet_directory_uri() ?>/img/arrow_top.png" width="73" height="36" alt="Prev Section"></a></div> 
<div class="next_section"><a id="after_work5"><img src="<?php echo get_stylesheet_directory_uri() ?>/img/arrow_next.png" width="73" height="36" alt="Next Section"></a></div>

Problem is, not all of the arrows are working to scroll up and down the page. Some work, some don't. I have made the on each correct to my knowledge with it being an area above or below but if you click on some arrows, it won't do anything.

Any one know what is going wrong?

URL: http://www.londonadvertising.com/2011 Pastie link: http://pastie.org/2913679

Many Thanks

Answer 1

The problem with the page navigation is that not all the < a > tag ids are unique.

The JavaScript is only finding the first the element with a particular ID and only that one will work. All others with the name ID after that will not do anything.

If you check, the only arrows that work are the first occurrences of a particular ID.

Ensure that all < a > tags under a div will class 'next_section' have a unique ID

<div class="next_section first">
 <a id="after_work1"> <!-- <<<< ID must be unique -->
   <img src="something.jpg" alt="Next Section">
 </a>
</div>