HTML5/CSS3 Schieberegler Scrollen nach oben beim Klicken auf die Tasten

Question

Heute habe ich versucht einen vollen HTML/CSS Slider zu erstellen, das einzige Problem das ich gerade habe ist, wenn ich versuche auf den nächsten/vorherigen Button zu klicken Anfang der Seite und ich weiß einfach nicht warum.

Die meisten der Lösungen im Internet verwenden Javascript oder Jquery, aber ich kann nicht jede Art von Javascript verwenden.

Ich hoffe, dass mir jeder helfen kann! Wenn Sie auf die nächste/vorherige Schaltfläche klicken, werden Sie das Problem bemerken! Ich habe ein Beispiel auf jsfiddle gemacht, wie Sie unten sehen können: https://jsfiddle.net/17cojwtv/

PS: Ich weiß, dass die Bilder nicht funktionieren!

Alle meine Einzelteile wie das funktioniert:

<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" /> 
     <a href="#no-js-slider-1" class="prev">prev</a> 
     <a href="#no-js-slider-3" class="next">next</a> 
    </li> 
    </ul> 
</div> 

Derzeit nur ich dieses 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

Ich denke, einige ähnliche Fragen wie diese bereits in der Site sind. jedenfalls hier gehen Sie 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>