div not scrolling when href link is clicked

Question

I have a website that has a bunch of pictures that you can scroll horizontally and I also have thumbnails that I would like to have be able to click on them to scroll to the desired picture. I have read all about scrolling to an id using an anchor however I still can not get this to work.. I will attach my code if someone could please help me out that would be amazing.

Thanks

    <!--Start Main Content-->
<div style="width:1100px; overflow-x:scroll; overflow-y:hidden;">
    <div style="width:6716px; height:600px; ">
        <!--<a id="section_1"></a>
            <div id="picture" style="background-image:url('../images/Photography/Fashion/Portrait05_lg.jpg'); width:465px; height:700px;">
                <div class="more" id="couch">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="plant">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="monitor">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>
            </div>-->

        <a id="section_2"></a>
            <div id="picture" style="background-image:url('../images/Photography/Fashion/Portrait06_lg.jpg'); width:700px; height:465px;">
                <div class="more" id="couch2">
                    <img src="images/more.png" width="25" height="25" />
                    <span><img src="../images/blog.png"></span>
                </div>

                <div class="more" id="plant2">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="monitor2">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>
            </div>

        <a id="section_3"></a>
            <div id="picture" style="background-image:url('../images/Photography/Fashion/Portrait07_lg.jpg'); width:700px; height:498px;">
                <div class="more" id="couch3">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="plant3">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="monitor3">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>
            </div>

        <a id="section_4"></a>
            <div id="picture" style="background-image:url('../images/Photography/Fashion/Portrait04_lg.jpg'); width:416px; height:643px;">
                <div class="more" id="couch4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="plant4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="monitor4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>
            </div>

        <a id="section_5"></a>
            <div id="picture" style="background-image:url('../images/Photography/Fashion/Portrait01_lg.jpg'); width:700px; height:517px;">
                <div class="more" id="couch4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="plant4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="monitor4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>
            </div>

        <a id="section_6"></a>
            <div id="picture" style="background-image:url('../images/Photography/Fashion/Portrait02_lg.jpg'); width:700px; height:465px;">
                <div class="more" id="couch4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="plant4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="monitor4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>
            </div>

        <a id="section_7"></a>
            <div id="picture" style="background-image:url('../images/Photography/Fashion/Portrait03_lg.jpg'); width:700px; height:527px;">
                <div class="more" id="couch4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="plant4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="monitor4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>
            </div>

        <a id="section_8"></a>
            <div id="picture" style="background-image:url('../images/Photography/Fashion/Portrait08_lg.jpg'); width:700px; height:465px;">
                <div class="more" id="couch4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="plant4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="monitor4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>
            </div>

        <a id="section_9"></a>
            <div id="picture" style="background-image:url('../images/Photography/Fashion/Portrait09_lg.jpg'); width:700px; height:399px;">
                <div class="more" id="couch4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="plant4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="monitor4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>
            </div>

        <a id="section_10"></a>
            <div id="picture" style="background-image:url('../images/Photography/Fashion/fashion01_lg.jpg'); width:700px; height:465px;">
                <div class="more" id="couch4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="plant4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="monitor4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>
            </div>

        <a id="section_11"></a>
            <div id="picture" style="background-image:url('../images/Photography/Fashion/fashion02_lg.jpg'); width:700px; height:481px;">
                <div class="more" id="couch4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="plant4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="monitor4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>
            </div>

        <!--<a id="section_12"></a>
            <div id="picture" style="background-image:url('../images/Photography/Fashion/fashion03_lg.jpg'); width:700px; height:879px;">
                <div class="more" id="couch4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="plant4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>

                <div class="more" id="monitor4">
                    <img src="images/more.png" />
                    <span>Test</span>
                </div>
            </div>
        -->

    </div>

</div>

<div id="index-text">
    <div class="shadowTop"></div>

    <div id="text" style="width:900px;">
    <a href="#section_1"><img src="../images/Photography/Fashion/Portrait06_lg.jpg" width="50" height="50" border="0" /></a>
    <a href="#section_2"><img src="../images/Photography/Fashion/Portrait06_lg.jpg" width="50" height="50" border="0" /></a>
    <a href="#section_3"><img src="../images/Photography/Fashion/Portrait06_lg.jpg" width="50" height="50" border="0" /></a>
    <a href="#section_4"><img src="../images/Photography/Fashion/Portrait06_lg.jpg" width="50" height="50" border="0" /></a>
    <a href="#section_5"><img src="../images/Photography/Fashion/Portrait06_lg.jpg" width="50" height="50" border="0" /></a>
    <a href="#section_6"><img src="../images/Photography/Fashion/Portrait06_lg.jpg" width="50" height="50" border="0" /></a>
    <a href="#section_7"><img src="../images/Photography/Fashion/Portrait06_lg.jpg" width="50" height="50" border="0" /></a>
    <a href="#section_8"><img src="../images/Photography/Fashion/Portrait06_lg.jpg" width="50" height="50" border="0" /></a>
    <a href="#section_9"><img src="../images/Photography/Fashion/Portrait06_lg.jpg" width="50" height="50" border="0" /></a>
    <a href="#section_10"><img src="../images/Photography/Fashion/Portrait06_lg.jpg" width="50" height="50" border="0" /></a>
    <a href="#section_11"><img src="../images/Photography/Fashion/Portrait06_lg.jpg" width="50" height="50" border="0" /></a>
    <a href="#section_12"><img src="../images/Photography/Fashion/Portrait06_lg.jpg" width="50" height="50" border="0" /></a><br><br>

Answer 1

Try using the name attribute in your tags for the bookmarks rather than id.

<a name="section_11"></a>