Question

我有一个照相馆，它的行为有些奇怪，无法弄清。单击应该显示图像的缩略图时，它不仅可以这样做，而且还可以向上滚动页面。如果图库显示在屏幕顶部下方一点，它将使其向上滚动，如果它经过屏幕顶部，则将使其向下滚动，直到图库部分的顶部与屏幕顶部对齐。屏幕。

我试图复制我在Codepen上所做的工作：https://codepen.io/dmontesi/pen/VJZeVq。我只使用SCSS / HTML。

<!-- Gallery -->
<section class="wrapper">
    <div class="wrapper__gall">
        <ul class="slides">
            <li id="slide1"><img src="https://cdn.pixabay.com/photo/2016/06/24/11/49/architecture-1477103_960_720.jpg" alt="" /></li>
            <li id="slide2"><img src="https://cdn.pixabay.com/photo/2016/06/24/11/48/architecture-1477101_960_720.jpg" alt="" /></li>
            <li id="slide3"><img src="https://cdn.pixabay.com/photo/2016/06/24/11/46/architecture-1477099_960_720.jpg" alt="" /></li>
        </ul>
        <ul class="thumbnails">
            <li>
                <a href="#slide1"><img src="https://cdn.pixabay.com/photo/2016/06/24/11/49/architecture-1477103_960_720.jpg" /></a>
            </li>
            <li>
                <a href="#slide2"><img src="https://cdn.pixabay.com/photo/2016/06/24/11/48/architecture-1477101_960_720.jpg" /></a>
            </li>
            <li>
                <a href="#slide3"><img src="https://cdn.pixabay.com/photo/2016/06/24/11/46/architecture-1477099_960_720.jpg" /></a>
            </li>
        </ul>
    </div>
</section>

我只希望它显示下一张幻灯片，并且不移动用户在屏幕上的位置。

Answer 1

（您可以在此处查看完整的代码：Codepen）

问题：

为什么当您单击导航链接时，它会滚动到图像顶部？以及如何预防？

答案：

好吧，这是链接的自然行为。这就是锚链接。

如果您使用<a href="#slide1">，则当用户单击它时，页面将滚动到带有id = slide1的元素。

您可以通过添加onclick="event.preventDefault()"来避免这种情况，但这意味着您不能再使用CSS :target规则了。这意味着目标图像将不再显示在其他图像之上。

相反，您可以使用javascript来控制全部行为。

在导航链接中添加onclick处理程序：

<a href="#slide1"  onclick='navigate(event)'>

您应该编写一个javascript导航功能。此函数应为当前active元素提供类active，并将其提供给单击的元素。像这样：

function navigate(event){
  //get active element
  var active = event.target.closest(".wrapper").getElementsByClassName("active")[0];
  //remove class "active" from active element
  if(active)active.classList.remove("active");
  //get target element from link
  var target = document.getElementById(event.target.closest("a").getAttribute("href").replace("#",""));
  //add class "active" to the target
  target.classList.add("active");
  //prevent default link behaviour
  event.preventDefault();
}

然后，我们应该为活动图像编写一个CSS规则（已替换li:target选择器。）：

.slides li.active {
  z-index: 3;
}
.slides li:not(.active) {
  z-index: 0;
}

（您可以在此处查看完整的代码：Codepen）

为什么单击图库缩略图时页面会向上滚动？

1 个答案: