1

Я верстаю сайт и хочу сделать кое-что красивое. Мне нужно чтобы страница при заходе сразу скроллила до нужного элемента, но не знаю как это реализовать.

1 ответ 1

2

Метод через вычисление позиции элемента, и прокрутки к этой позиции:

document.addEventListener( 'DOMContentLoaded', ()=>{ // Ожидание готовности документа
    
    let div = document.querySelector('.my-div');

    window.scrollTo({
        top: div.offsetTop, // Здесь вычисление позиции может быть сложнее
        behavior: 'smooth', // Плавность прокрутки, убрать если не нужно
    });
    
});
.my-div {
  background-color: yellow;
}
<div>123</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<div>123</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<div>123</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="my-div">123</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<div>123</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<div>123</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<div>123</div>

Улучшенный метод, предложенный @Deonis (c) в комментарии:

document.addEventListener( 'DOMContentLoaded', ()=>{ // Ожидание готовности документа
    
    document.querySelector('.my-div').scrollIntoView({
        behavior: 'smooth',
        block: 'start'
    });
    
});
.my-div {
  background-color: yellow;
}
<div>123</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<div>123</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<div>123</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<div class="my-div">123</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<div>123</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<div>123</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<div>123</div>

У этого метода есть нюанс - он скролит все скролы - страницы и скроло-имеющих-родителей, чтобы элемент был в итоге в области видимости. Для "блока на странице" это отлично. А для "блоков в скрольных родителях" может не подойти из-за не всегда уместных движений страницы, как здесь в снипете "выполнить код".

2

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.