Перейти на якорь без изменения URL

Question

При загрузке страницы я хотел бы перейти на #content без изменения URL.

Я думал, что смогу использовать

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

, но #content все еще существует в URL.

Есть ли лучший метод?

---

Edit:

Также пробовал

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

Но это отправляет браузер в цикл.

Answer 1

Вы можете найти вертикальную позицию якоря с этим идентификатором, а затем прокрутить до этой позиции.

Answer 2

Перейти к или прокрутить, чтобы привязать указанный идентификатор div без изменения URL

ПОПРОБУЙТЕ ДЕМО

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>

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>

Рабочая JSFiddle