當點擊按鈕時，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滑塊會滾動到頂部

回答

相關問題