Clicking link returns page to top

Question

I set images so when you click them they each reveal a different div underneath them.

I found the original code here: http://www.dynamicdrive.com/forums/showthread.php?74782-Changing-content-in-Div-upon-Link-Click

Here is my code:

#workSamples {
    width:960px;
    margin:auto;
}

#button1 {
    width:300px;
    height:236px;
    display:inline-block;
    float:left;
    margin:0px 10px 20px 10px;
    -webkit-box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 0px 8px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 0px 8px rgba(50, 50, 50, 0.75);
}
.b1 {
    width:300px;
    height:236px;
    overflow:hidden;
}
.b1 img {
    height:auto;
    -webkit-transition: margin 1s ease;
    -moz-transition: margin 1s ease;
    -o-transition: margin 1s ease;
    -ms-transition: margin 1s ease;
    transition: margin 1s ease;
}
.b1 img:hover {
    margin-top: -236px;
}

#button2 {
    width:300px;
    height:236px;
    display:inline-block;
    float:left;
    margin:0px 10px 0px 10px;
    -webkit-box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 0px 8px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 0px 8px rgba(50, 50, 50, 0.75);
}
#button3 {
    width:300px;
    height:236px;
    display:inline-block;
    float:left;
    margin:0px 10px 0px 10px;
    -webkit-box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 0px 8px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 0px 8px rgba(50, 50, 50, 0.75);
}

#button1:focus~#content #def,
#button2:focus~#content #def,
#button3:focus~#content #def,
#button4:focus~#content #def {display:none;}

#button1:focus~#content div:nth-child(2),
#button2:focus~#content div:nth-child(3),
#button3:focus~#content div:nth-child(4),
#button4:focus~#content div:nth-child(5) {display:block;}

#content {
    width:940px; 
    height:307px;
    color:black;
    font-size:10px;
    text-align:center;
    margin:20px auto;
    -webkit-box-shadow: 0px 0px 8px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 0px 8px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 0px 8px rgba(50, 50, 50, 0.75);
    overflow:hidden;
    background:red;
}

.caption {
    background:blue;
    width:200px;
    margin:auto;
    height:60px;
    background:#694264;
    -webkit-transition:all .3s ease-out;  
    -moz-transition:all .3s ease-out;  
    -o-transition:all .3s ease-out;  
    -ms-transition:all .3s ease-out;  
    transition:all .3s ease-out;  
    left:0;
    font-size:14px;
    padding:10px;
}

#content:hover .caption {
    -moz-transform:translateY(-100%);  
    -o-transform:translateY(-100%);  
    -webkit-transform:translateY(-100%);  
    transform:translateY(-100%);  
}

#faq,#her,#and,#enj {display:none;}

#faq:hover{
    background:red;
}

<section class="top" data-type="background" data-speed="10" class="pages">
        <section id="w">
            <div class="title">My Work</div>
                <div id="workSamples">
                    <a id="button1" href="#" tabindex="1"><div class="b1"><img src="Images/work/sample01.jpg" alt=""></div></a>
                    <a id="button2" href="#" tabindex="2"><div class="b1"><img src="Images/work/sample02.jpg"></div></a>
                    <a id="button3" href="#" tabindex="3"><div class="b1"><img src="Images/work/sample03.jpg"></div></a>
                    <div id="content"> 
                        <div id="def">This is where I put the default information. No clicks needed </div>
                        <div id="faq"><img src="Images/absolutebeauty.jpg">
                            <div class="caption">
                                <a href="http://www.absolutebeauty.ie">
                                    <h4>Absolute Beauty</h4><br>Visit the site</a>
                            </div>
                        </div>
                        <div id="her"><img src="Images/bestacoustic.jpg"></div>
                        <div id="and"><img src="Images/engagement.jpg"></div>
                    </div>
            </div>
        </section>
</section>

The code works well on it's own but when I added it to my site it now returns me to the top of the page when I click on the first image link.

Here is my site: http://www.liddily.com

Click work and click on any of the images, you will see what I mean.

I don't know why this is happening. Can someone please help me out?

Thanks for reading!

Answer 1

You have your links set up to go to an anchor that isn't there so it returns the page itself. <a href="#">Return</a>

make these link to an actual location and the "refresh" effect will stop.

Notice in the example on that site it shows the following code with locations after the hash # :

<div id="button1"><a href="#FAQ"><img src="http://img62.imageshack.us/img62/3523/p42e.png"></a></div>
<div id="button2"><a href="#Her"><img src="http://img16.imageshack.us/img16/3742/lnam.png"></a></div>
<div id="button3"><a href="#And"><img src="http://img829.imageshack.us/img829/2347/kflq.png"></a></div>
<div id="button4"><a href="#Enjoy"><img src="http://img24.imageshack.us/img24/5111/zv9.png"></a></div>

<div id="content"> This is where I put the default information. No clicks needed </div

<a name="FAQ">
<div style="border: 1px dashed black;width: 300px;height:500px;position:fixed;left:750px;top:150px;}
FAQ content will go here.

And then the example shows a named location for the link to travel to. you need to implement this format for it to work.