Question

在加载页面时，我希望在不更改网址的情况下转到#content。

我以为我可以使用

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

但网址上仍然存在#content。

有更好的方法吗？

编辑：

也试过

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

但这会让浏览器进入循环。

Answer 1

您可以找到具有该ID的锚点的垂直位置，然后滚动到该位置。

Answer 2

这是一个 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 可能是最佳实践，但这正是我所需要的！我相信也可以进行其他改进！

Answer 3

这样做会有一个很好的动画：

<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

Answer 4

转到或滚动至锚定指定的div ID，而不更改url

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>

转到锚点而不更改网址

4 个答案: