html - 单击按钮时，HTML5/CSS3滑块滚动到顶部

今天，我试图制作一个完整的HTML / CSS滑块，我现在遇到的唯一问题是，当我尝试单击“下一个/上一个”按钮时，我的页面正在滚动到页面顶部，但我不知道为什么。

互联网上的大多数解决方案都使用javascript或jquery，但我无法使用任何种类的javascript。

希望任何人都能帮助我！当您单击下一个/上一个按钮时，您将注意到问题！我在jsfiddle上做了一个示例，如下所示：
https://jsfiddle.net/17cojwtv/

PS：我知道图像不起作用！

我所有的物品都是这样的：

<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>

目前，我仅使用此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;
}

最佳答案

我认为网站上已经存在类似的类似问题。无论如何，您都可以使用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>

关于html - 单击按钮时，HTML5/CSS3滑块滚动到顶部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36627946/