HTML5 / CSS3 slider scrolling to top when clicking buttons - html

Question

Today I was trying to make a full HTML/CSS slider, the only problem I have right now is when I try to click the next/previous button my page is scrolling to the top of the page and I just don't know why.
Most of the solutions on internet are using javascript or jquery but I am not able to use any kind of javascript.
I hope anyone can help me! When you click the next/previous button you will notice the problem! I have made an example on jsfiddle as you can see below:
https://jsfiddle.net/17cojwtv/
PS: i know that the images are not working!
All my items work like this:
<div class="slider">
<ul>
<li class="slide" id="no-js-slider-2">
<img alt="" style="width: 712px; height: 474px;" src="/Manuals/MAN_20150317141748_a65c1730-e7f1-40f7-8/Images/inbrengen_mayo2.jpg" />
prev
next
</li>
</ul>
</div>
Currently i only use this CSS:
ul li {
list-style-type: none !important;
margin: 0!important;
}
a.prev,
a.next {
height: 100px;
width: 43px;
opacity: 0.7;
text-indent: -99999px;
cursor: pointer;
-webkit-transition: opacity 200ms ease-out;
}
a.prev:hover,
a.next:hover {
opacity: 1;
}
.prev {
left: 0;
/* margin-top: 212px;*/
position: absolute;
background: #003f54 url('https://lh4.googleusercontent.com/-JN1IZLtuToI/UUoZnMG3C_I/AAAAAAAAAE8/SEbJ9nqXGnY/s226/sprite.png') no-repeat -200px 25px;
}
.next {
/*margin-top: 212px;*/
left: 669px;
position: absolute;
background: #003f54 url('https://lh4.googleusercontent.com/-JN1IZLtuToI/UUoZnMG3C_I/AAAAAAAAAE8/SEbJ9nqXGnY/s226/sprite.png') no-repeat -167px 25px;
}
.slider {
margin: 0 !important;
/*position: relative;*/
height: 474px;
}
.slide {
position: absolute;
height: 100%;
width: 100%;
}
.slider .slide:target {
z-index: 100;
}
.slider img {
margin: 0 !important;
}

Answer 1

I think there are some similar questions like this already in the site. anyhow here you go use onclick="return false;
<li class="slide" id="no-js-slider-2">
<img alt="" style="width: 712px; height: 474px;" src="/Manuals/MAN_20150317141748_a65c1730-e7f1-40f7-8/Images/inbrengen_mayo2.jpg" />
<a onclick="return false; href="#no-js-slider-1" class="prev">prev</a>
<a onclick="return false; href="#no-js-slider-3" class="next">next</a>
</li>