Page Jump to Image

I'm playing around with a simple website (I'm a beginner with HTML and CSS), where I made a simple menu with some submenus. The content of the page, mainly images and videos will be displayed in a scrollbox.

Now I thought that instead of creating different subpages, it'd be better to be able to jump down to the relevant content. I've tried out different solutions, but something's not working out - or at least, jsfiddle doesn't show it.

    <div id="navigation">
    <ul>        
      <li>
        <a href="#">main menu</a>
            <ul>

                  <li><a href="#section1">section 1</a></li>
                  <li><a href="#section2">section 2</a></li>
                  <li><a href="#section3">section 3</a></li>
            </ul>
        </li>  
    </ul>   
</div>

that's my code for one part of the menu, here's the scrollbox with images:

    <div class="scroll" style="float:left;border: 1px solid black; width: 40em; 
     height:  30em; line-height: 3em; overflow-y: scroll; overflow-x:hidden; 
     text-align: center; margin:5%; margin-bottom: 5%; background-color: #ffffff; 
     color: #ffffff;">

     <img src="http://websiteurl.com/image.jpg" style="float: left; width: 95%; 
      padding: 3%; padding-right: 3%; display: block" alt="image1"> 
     <a name="section1"><img src="http://websiteurl.com/image2.jpg"
     style="float: left; width: 95%; padding: 3%; padding-right: 3%; alt="image2"></a></div>

So as you can see, I would like clicking on the menu link "section 1" cause to jump down the scrollbox to the desired image location without changing the page itself.

How would that be possible? or: where's the error in the anchoring? Thank you all for answers!

Solution

It's difficult reading the code with the inline css. I'd first suggest moving the css to a stylesheet, that would surely help readability and debugging.

Have you tested without the images or without the scroll box?

An anchor tag is normally just

<a href="#myAnchorName">Click Here</a>

or if using images instead of links

<a href="#myAnchorImage"><img scr="imageLocation"/></a>

and then the anchor part is

<a name="myAnchorName"></a>