在不更改 url 的情况下转到锚点答案

【问题标题】：Go to anchor without changing url在不更改 url 的情况下转到锚点
【发布时间】：2010-10-26 02:13:11
【问题描述】：

在加载页面时，我希望它转到 #content 而不更改 url。

我以为我可以使用

window.location.hash = "content";
window.location.replace("#content", "");

但#content 仍然存在于网址中。

有更好的方法吗？

编辑：

也试过了

window.location.hash = "content";
window.location.replace(window.location.toString().replace("#content", ""));

但这会使浏览器陷入循环。

【问题讨论】：

标签： javascript window anchor

【解决方案1】：

您可以使用该 id 找到锚点的垂直位置，然后滚动到该位置。

【讨论】：

【解决方案2】：

在不更改 url 的情况下转到或滚动以锚定指定的 div id

TRY DEMO

function scrollSmoothTo(elementId) {
  var element = document.getElementById(elementId);
  element.scrollIntoView({
    block: 'start',
    behavior: 'smooth'
  });
}
#userdiv {
  margin-top: 200px;
  width: 200px;
  height: 400px;
  border: 1px solid red;
}

a {
  color: #337ab7;
  cursor: pointer;
}

a:hover {
  text-decoration: underline;
}
<a onclick="scrollSmoothTo('userdiv')">
  Scroll to userdiv
</a>

<div id="userdiv">
  Lorem ipsum this is a random text
</div>

【讨论】：

【解决方案3】：

这是一个 10 年前的问题，但我在使用 Nextjs 时遇到了这个问题，并希望在不影响 url 的情况下顺利导航到较低的元素...... Nextjs，Typescript。

const Anchor: React.FC = () => {
    const smoothScrollTo = e => {
          e.preventDefault();
          const element = document.getElementById('search');
          element.scrollIntoView({
              block: 'start',
              behavior: 'smooth' // smooth scroll
          })
    };

 return (
   <div>
      <a
        href=""
        onClick={smoothScrollTo}>
        Let's go!
      </a>
      <div id = "search">Take me here!</div>
   </div>
  )
};

现在，在这里使用 refs 可能是一个最佳实践，但这正是我所需要的！我相信还可以进行其他改进！

【讨论】：

【解决方案4】：

这将通过一个漂亮的动画来完成：

<a href="#link">Click to scroll</a>

<div id="link" style="margin-top: 1000px; height: 300px; background-color: blue; margin-bottom: 1000px">
    Click and scroll to this div without changing url!
</div>


<script>
    $('a').on('click', function(e) {
        // prevent default anchor click behavior
        e.preventDefault();

        // store hash
        var hash = this.hash;

        if ($(hash).length) {
            $('html, body').animate({
                scrollTop: $(hash).offset().top
            }, 300, function() {
                // Do something fun if you want!
            });
        }
    });
</script>

Working JSFiddle

【讨论】：