使用 Javascript 滚动到特定位置失败答案

【问题标题】：Scrolling to specific position with Javascript failed使用 Javascript 滚动到特定位置失败
【发布时间】：2021-02-18 08:30:42
【问题描述】：

我是 HTML 和 Javascript 的新手，我想创建一个链接，当点击该链接时，它会滚动到页面中的特定位置。我在网上做了一些研究，并提出了以下解决方案：

我的 HTML 文件：

...
<a href="#" onclick="scroll()">My link</a>
...

我的 Javascript（我包含在 <head> 标签中）：

function scroll() {
    window.scrollTo({ top: 300, left: 0, behavior: "smooth" });
}

但这并不好用，因为每次我单击链接时，页面都会滚动到页面的最顶部，而不管我在window.scrollTo 中设置的位置。有人能指出我的错误在哪里以及如何做对吗？

谢谢！

【问题讨论】：

为什么首先使用 JS 而不是称为anchor 的技术？您将其用作超参考：#id，然后它将自动滚动到具有该 id 的元素。
我使用 Javascript 是因为锚方法将特定 ID 添加到浏览器的导航栏中，我想避免这种情况。另外，我不想滚动到一个给定元素的确切位置，而是滚动到其上方一定数量的像素（这是为了防止我的导航栏与标题重叠）。

标签： javascript html window

【解决方案1】：

我完全不知道你的 html 结构也许这个方法会对你有所帮助：

function goToTarget(){
  var element = document.getElementById("target");

  element.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"});
}

#target{
  margin-top:100pc;
}

<button onclick="goToTarget()"> click me </button>

<div id="target"> i am target </div>

【讨论】：

感谢您的回答。老实说，我不知道我做错了什么，但这对我不起作用。我创建了一个按钮，包含了脚本，输入了特定的目标 ID 并检查了所有内容是否有错别字。尽管如此，单击按钮时它不会滚动到任何地方。我正在使用语义 HTML，这可能是原因吗？或者可能是因为我在我的 CSS 中声明了 scroll-behaviour: smooth ？

【解决方案2】：

假设您希望 smooth 滚动到 same 页面上的特定位置，您可以按照 tacoshy 推荐的方式设置 HTML，使用锚点作为您将点击的位置和您的目的地的参考#id：

<a href="#my-link" class="same-page-link">My link</a>

<h2 id="my-link">My Link Section</h2>

然后，如果你在你的页面上使用 jQuery，你可以给锚标签添加一个监听器：

$(".same-page-link").on("click", function(event) {
  var $target;

  event.preventDefault();

  $target = $($(this).attr("href"));

  $("html, body").animate({
    scrollTop: $target.offset().top - 50
  }, 1000, "swing").promise().done(function() {
    $target.attr('tabindex', '0'); //Adding tabindex for elements not focusable
    $target.focus(); //Setting focus
  });

  return false;
});

- 50 是从固定标题偏移滚动位置的顶部，如果有的话。

如果您不使用 jQuery，GitHub 上有一个纯 JavaScript 解决方案，您可以根据需要进行调整。

至于您的原始功能window.scrollTo({ top: 300, left: 0, behavior: "smooth" }); 我认为它总是会将您带到距离窗口顶部 300 像素的位置，并且可能不适用于 IE 或 Safari（我认为它们不支持选项版本滚动到）。

【讨论】：

感谢您的回答。我不知道我的 HTML 发生了什么，但这个设置也不起作用。我不使用 jQuery，所以我尝试了 GitHub 中的那个，但它没有改变任何东西。知道可能出了什么问题吗？
您能否编辑您的问题以包含您的所有代码，以便重现该问题？可能是您的代码中有其他内容导致滚动不起作用。
我的整个 HTML 代码是 200 行，而 CSS 是 500 行。我将仅使用提到的代码尝试一个新的空白文件，并让您知道它是否有效。