无法滚动到锚点

Posted 2023-03-05

【中文标题】无法滚动到锚点

【英文标题】：Can't scroll to anchor

【发布时间】：2021-08-06 19:09:52

【问题描述】：

我想创建元素周期表，在单击元素符号后显示一些附加信息。我使用了在 codepen 上找到的示例：https://codepen.io/ankit567/pen/wxbYXE，并且我设法让它与页面底部的可折叠 div 一起使用。不幸的是，我的知识不允许我克服我最近遇到的问题。我无法让页面滚动到刚刚打开的可折叠页面。

在这里你可以找到我目前的工作： https://codepen.io/zfkibuj/pen/RwpGWBL

如果您能帮助我找到解决方案，我将不胜感激。

我希望页面滚动到

<h1 id="tresc">Wzorce, odczynniki, roztwory pomocnicze do oznaczania</h1>

点击后：

<div class="element other-nonmetal c1 r1">
        <div data-toggle="collapse" href="#h" role="button" aria-expanded="false" aria-controls="h">
          <input class="activate" name="elements" type="radio" />
          <input class="deactivate" name="elements" type="radio" />
          <div class="square">
            <div class="atomic-number">1</div>
            <div class="label">
              <div class="symbol">H</div>
              <div class="name">Wodór</div>
            </div>
            <div class="atomic-mass">1.008</div>
          </div>
        </div>
      </div>

也许解决方案真的很简单，但我对 Wordpress 网站只有一些基本的经验。这是我迄今为止最大的项目:)

到目前为止，我发现了这个：

$('#h').on('shown.bs.collapse', function () 
  this.scrollIntoView();
);

工作得很好，但我不知道如何使它与其他 id 一起工作，如#he、#li、#be 等等......

【问题讨论】：

标准的解决方案是在你的所有元素上使用一个公共类，然后应用事件处理程序。

【参考方案1】：

谢谢，我通过添加解决了

onClick="document.getElementById('tresc').scrollIntoView();"

到

<div data-toggle="collapse" href="#h" role="button" aria-expanded="false" aria-controls="h">

最终解决方案如下：

<div data-toggle="collapse" href="#be" role="button" aria-expanded="false" aria-controls="be" onClick="document.getElementById('tresc').scrollIntoView();">