Блог

Главная - Вопросы по программированию - Как прокрутить вниз и отобразить раздел на одной странице?

Как прокрутить вниз и отобразить раздел на одной странице?

#javascript #html #css

Вопрос:

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

Кто-нибудь может подсказать мне, как это сделать?

Комментарии:

1. смотрите этот пример ( codepen.io/magglomag/pen/RPGgJG ) 2) ( codepen.io/ajayadav09/pen/KBFGh )

2. Попробуйте сделать раздел по крайней мере таким же высоким, как окно браузера, т. е. 100 Вч.

3. Спасибо вам за ответ! Но этот метод увеличивает промежутки между другими разделами.

Ответ №1:

Я думаю, что свойство CSS scroll-padding-top -это ваш ответ.

Комментарии:

1. Большое вам спасибо за ответ. Нужно ли мне добавлять это свойство в раздел #readmore или в код кнопки?

2. В разделе «Подробнее». Также вы можете добавить его в корень, если это то, что вы хотите и для других разделов.

Ответ №2:

У вас есть разные варианты решения этой проблемы

Первый подход заключается в использовании только HTML для прокрутки до элемента с определенным id 

 html{height:3000px;scroll-behavior: smooth;}
#readmore{position:absolute; top:2000px;} 
 <a href="#readmore">Scroll down</a>
<h1 id="readmore">
Read More
</h1>

Второй подход заключается в использовании scrollIntoView метода, который прокручивает указанный элемент в видимую область окна браузера.

 const element = document.getElementById("readmore");

document.getElementById('btn').addEventListener('click', () => {
  element.scrollIntoView();
}) 
 html{height:3000px;scroll-behavior: smooth;}
#readmore{position:absolute; top:2000px;} 
 <button id="btn">Scroll down</button>
<h1 id="readmore">
Read More
</h1>

Третий подход заключается в том, чтобы жестко закодировать конкретное место, в котором я хотел бы прокрутить, в этом случае я устанавливаю его на 2000px (высоту)

 const element = document.getElementById("readmore");

document.getElementById('btn').addEventListener('click', () => {
    window.scrollTo(0, 2000);
}) 
 html{height:3000px;scroll-behavior: smooth;}
#readmore{position:absolute; top:2000px;} 
 <button id="btn">Scroll down</button>
<h1 id="readmore">
Read More
</h1>
Метки: