防止<href =“＃slider” class =“ slider-change”>跳到頂部

Question

關於此問題有很多問題，但我還沒有找到適合我的解決方案。 這將創建一個只帶有html和css的滑塊

<div class="slider-holder">
    <span id="slider-image-1"></span>
    <span id="slider-image-2"></span>
    <span id="slider-image-3"></span>
    <div class="image-holder">
        <img src="1.jpg" class="slider-image" />
        <img src="2.jpg" class="slider-image" />
        <img src="3.jpg" class="slider-image" />
    </div>
    <div class="button-holder">
        <a href="#slider-image-1" class="slider-change"></a>
        <a href="#slider-image-2" class="slider-change"></a>
        <a href="#slider-image-3" class="slider-change"></a>
    </div>
</div>

CSS：

.slider-holder{
            width: 800px;
            height: 400px;
            background-color: yellow;
            margin-left: auto;
            margin-right: auto;
            margin-top: 0px;
            text-align: center;
            overflow: hidden;
        }

        .image-holder
        {
            width: 2400px;
            background-color: red;
            height: 400px;
            clear: both;
            position: relative;

            -webkit-transition: left 2s;
            -moz-transition: left 2s;
            -o-transition: left 2s;
            transition: left 2s;
        }

        .slider-image
        {
            float: left;
            margin: 0px;
            padding: 0px;
            position: relative;
        }

        #slider-image-1:target ~ .image-holder
        {
            left: 0px;
        }

        #slider-image-2:target ~ .image-holder
        {
            left: -800px;
        }

        #slider-image-3:target ~ .image-holder
        {
            left: -1600px;
        }

        .button-holder
        {
            position: relative;
            top: -20px;
        }

        .slider-change
        {
            display: inline-block;
            height: 10px;
            width: 10px;
            border-radius: 5px;
            background-color: brown;
        }

問題是，如果我使用preventdefault或“＃！” 這些事件實際上不會發生，因此滑塊也不會改變。

我也發現使用

function keepLocation(oldOffset) {
  if (window.pageYOffset!= null){
    st=oldOffset;
  }
  if (document.body.scrollWidth!= null){
    st=oldOffset;
  }
  setTimeout('window.scrollTo(0,st)',10);
}

並添加

<a href="#slider-image-1" onclick="keepLocation(window.pageYOffset);" class="slider-change"></a>
            <a href="#slider-image-2" onclick="keepLocation(window.pageYOffset);" class="slider-change"></a>
            <a href="#slider-image-3" onclick="keepLocation(window.pageYOffset);" class="slider-change"></a>

可以，但是有一點點的上下移動，看起來並不好。

是否有人對鏈接可以在頁面的任何跳轉或移動中起作用的解決方案提供了解決方案？

提前致謝

Answer 1

只需在函數中使用e.preventDevault（）

function keepLocation(e) {
  e.preventDefault();
}