javascript - 防止 < href ="#slider"class ="slider-change"> 跳到顶部

Question

关于这个问题有很多问题，但我还没有找到适合我的解决方案。这是创建一个 slider ，只有 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 或“#!”事件实际上不会发生，因此 slider 不会改变。

我也发现使用

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();
}