Question

我有一个结合CSS和JavaScript的简单HTML代码。当您单击链接时，您的URL将会像"#link1"一样被更新。然后，叠加层的可见性即变为可见状态，仅显示在"#link1"

现在的问题是：当我单击链接时，我的屏幕会自动滚动到该叠加层，但我不希望那样。我尝试了"return false"或"event.preventDefault()"。可以，但是我的网址没有更新，因此我的覆盖图不会显示。

剂量有人知道我该怎么做吗？

也尝试过：

return null

event.preventDefault()

onClick

----html----
<!--The Link-->
<area href="#link1" shape="rect" coords="0,0,100,100" />

<!--The Overlay-->
<div id="link1" class="overlay">
    <div class="popup">
        ...some text...
    </div>
</div>

----css----
.overlay {
    visibility: hidden;
    ... some other stuff ...
}
.overlay:target {
    visibility: visible;
}

Answer 1

您能以这种方式代替使用href =“＃link1”，执行href =“ javascript：void（0）”，并使用jquery属性链接使overlay属性显示

      $('body').on('click','a', function(){
          //Something here
      }

Answer 2

首先将display类的overlay属性设置为none
您需要创建一个函数，该函数将在加载页面或单击以#开头的链接时触发。
该函数将获取url的哈希值，获取相应的元素，并将其display属性设置为none以外的其他值
这样，当页面加载或哈希值更改时，元素将不可见。

if (document.readyState === "complate") onLoad();
else addEventListener("load", onLoad);

function onLoad() {
  var target = document.getElementById(new URL(document.URL).hash.substring(1));
  if (target && target.classList.contains("overlay")) {
    target.classList.add("active");
  }
}

document.querySelectorAll("[href^='#']").forEach(function(link) {
  link.addEventListener("click", function() {
    setTimeout(onLoad, 0);
  });
});

.overlay {
  display: none;
}

.overlay.active {
  display: block;
}

<a href="#link1">Show overlay</a>

<!--The Overlay-->
<div id="link1" class="overlay">
  <div class="popup">
    ...some text...
  </div>
</div>

另一种更简单的解决方案是使用position: fixed来使元素定位为静态，并始终将其放置在视口中（无需滚动）。

单击链接时停止自动滚动

2 个答案: