按下按钮时滚动到网页中的某个部分的 HTML 代码答案

【问题标题】：Html code to scroll to a section in a webpage when a button is pressed按下按钮时滚动到网页中的某个部分的 HTML 代码
【发布时间】：2021-09-01 21:53:44
【问题描述】：

好的，我没有编程经验，但我目前在 Elementor（一个网站构建工具）中工作，在我的网站上，我有一个 Html 标签，它创建了一个名为 South America 的按钮：

<button onclick="myFunction_sa()">
  South America
</button>

还有另一个包含脚本的 Html 标记。当按下“South America”按钮时，此脚本会取消隐藏“sam-sec”部分。脚本如下：

<script>
function myFunction_sa() {
  var x = document.getElementById("sam-sec");
  if (x.style.display === "block") {
    x.style.display = "none";
  
  } else {
    x.style.display = "block";
  }
}
</script>

默认情况下隐藏“sam-sec”部分。我想添加一个功能，以便在按下“南美”按钮并且该部分可见时，窗口会自动滚动到该部分。

【问题讨论】：

标签： html css scroll elementor

【解决方案1】：

这样

委托并提供数据属性
使用scrollIntoView
切换类而不是使用 style.display

虚拟 div 仅用于测试期间的间距原因

window.addEventListener("load", function() {
  document.getElementById("nav").addEventListener("click", function(e) {
    const tgt = e.target
    if (tgt.classList.contains("scrollAndShow")) {
      const id = tgt.dataset.id;
      const div = document.getElementById(id);
      if (div) {
        div.classList.toggle("hide")
        if (!div.classList.contains("hide")) div.scrollIntoView({behavior: "smooth"});
      }
    }
  })
})

.hide {
  display: none
}

.dummy { display:block; height:500px }

<div id="nav">
  <button type="button" class="scrollAndShow" data-id="sam-sec">South America</button>
  <button type="button" class="scrollAndShow" data-id="eur-sec">Europe</button>
</div>
<div class="dummy"><hr/></div>
<div id="sam-sec" class="hide">South America</div>
<div class="dummy"><hr/></div>
<div id="eur-sec" class="hide">Europe</div>

【讨论】：

【解决方案2】：

为了平滑滚动，试试这个：

.hidden {
  display: none;
}

<button onclick="myFunction_sa()">
  South America
</button>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div id="sam-sec" class="hidden">South America</div>

<script>
  function myFunction_sa() {
    var x = document.getElementById("sam-sec");
    if (x.style.display === "block") {
      x.classList.add('hidden');

    } else {
      x.classList.remove('hidden');; // You wanted it visible prior to scroll so this comes first  
      x.scrollIntoView({
        behavior: 'smooth'
      }); // added '{behavior: 'smooth'}' for smooth scroll
    }
  }
</script>

【讨论】：

【解决方案3】：

body{
    scroll-behaviour: smooth;
}

<a href="#SA"><button>South America</button></a>
<br>
<br>
<br><br>
<br><br>
<br>
<br><br><br><br><br><br><br><br>
<br>
<br>
<br>
<br><br>
<br><br>
<br>
<br><br><br><br><br><br><br><br>
<br><br>
<br>
<br><br>
<br><br>
<br>
<br><br><br><br><br><br><br><br>
<br><br>
<br>
<br><br>
<br><br>
<br>
<br><br><br><br><br><br><br><br>
<br><br>
<br>
<br><br>
<br><br>
<br>
<br><br><br><br><br><br><br><br>
<br>
<h2 id="SA">South America</h2>

简单

【讨论】：