当点击按钮时，HTML5/CSS3滑块会滚动到顶部

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

互联网上的大多数解决方案都使用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; 
}

来源

2016-04-14 Bart Nooijens

我认为有这样一些类似的问题已经在网站内。总之在这里你去使用的onclick =“返回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>

来源

2016-04-14 15:52:50

卡迈勒您好，感谢您的快速回答当我添加的onclick =”返回false“！我的滑块不再工作 –

还的onclick =”返回false; “不工作 –

我didsearch为你...使用任何解决方案在这里http://stackoverflow.com/questions/1601933/how-do-i-stop-a-web-page-from-scrolling-to-the-top -when-a-link-is-clicked-that-t –

当点击按钮时，HTML5/CSS3滑块会滚动到顶部

回答

相关问题