Плавный переход по секциям внутри страницы, через выпадающий список
У меня на сайте есть страница на которой будет, многовато секций. Я хочу, чтобы человек выбирал в выпадающем списке нужную секцию и плавно к ней переходил.
Например: человек выбрал в выпадающем списке пункт Секция 3 и страница плавно прокрутилась к нужной секции. И аналогично с другими пунктами
<select name="objects" id="objects">
<option value="Home">Выберите секцию</option>
<option value="1"><a href="#section1">Секция 1</a></option>
<option value="2"><a href="#section2">Секция 2</a></option>
<option value="3"><a href="#section3">Секция 3</a></option>
<option value="4"><a href="#section4">Секция 4</a></option>
<option value="5"><a href="#section5">Секция 5</a></option>
</select>
<div id="section1">Секция 1</div>
<div id="section2">Секция 2</div>
<div id="section3">Секция 3</div>
<div id="section4">Секция 4</div>
<div id="section5">Секция 5</div>Ответы (1 шт):
Автор решения: UModeL
→ Ссылка
Воспользуйтесь методом scrollIntoView, добавив в опциях соответствующее поведение для прокрутки:
document.getElementById("objects").addEventListener('change', (ev) => {
document.getElementById(`section${ev.target.value}`).scrollIntoView({
behavior: 'smooth',
block: 'start'
});
});/* For example only --> */ body { margin: 0; min-height: 100vh; } #objects { position: fixed; } section[id^="section"] { display: grid; place-items: center; height: 100vh; box-shadow: inset 0 0 50px red; }<select name="objects" id="objects">
<option value="Home" disabled selected>Выберите секцию</option>
<option value="1">Секция 1</option>
<option value="2">Секция 2</option>
<option value="3">Секция 3</option>
<option value="4">Секция 4</option>
<option value="5">Секция 5</option>
</select>
<section id="section1">Секция 1</section>
<section id="section2">Секция 2</section>
<section id="section3">Секция 3</section>
<section id="section4">Секция 4</section>
<section id="section5">Секция 5</section>