Clicking link returns page to top - html

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. Return
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"><img src="http://img62.imageshack.us/img62/3523/p42e.png"></div>
<div id="button2"><img src="http://img16.imageshack.us/img16/3742/lnam.png"></div>
<div id="button3"><img src="http://img829.imageshack.us/img829/2347/kflq.png"></div>
<div id="button4"><img src="http://img24.imageshack.us/img24/5111/zv9.png"></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.