HTML <a> 从第二次点击开始跳转到页面的特定部分

Question

我的目标网页中有以下 HTML 代码

<div class="col-12 text-center mt-4 mb-4">
   <a class="btn know-more-btn text" href="#billing">Tell Me More</a>
</div>

<div id="billing" class="billing-section">
   //show some billing options
</div>

第一次点击btn Know-more-btn时，屏幕闪烁，第二次点击后什么也没有发生，它“跳”到页面上的正确位置(计费部分) 不知道为什么会发生这种情况

还有一种方法可以将“跳转”变成模拟快速滚动到该部分

Answer 1

试试这个

html

<div class="col-12 text-center mt-4 mb-4" (click)="toSec()">
   <a class="btn know-more-btn text">Tell Me More</a>
</div>

ts

toSec() {
  document.getElementById("billing").scrollIntoView();
}

为了平滑滚动，将其添加到主样式文件

CSS

html {
  scroll-behavior: smooth;
}