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

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

1 个答案: