Html/css, которые прокручиваются вниз до разных разделов div на веб-странице

Может кто-нибудь мне помочь Я ищу пример кода css/html:

У меня есть веб-страница с тремя кнопками (верхняя, средняя, нижняя), каждая из которых указана в разделе 1 div на моей странице, и пусть моя первая секция div находится в середине этой страницы div id='middle'.

Если я нажму эту кнопку (в середине), моя страница автоматически прокрутит вниз моей страницы в разделе div #middle.

для других кнопок, обозначенных div id='top', и div id='bottom'

Спасибо, вперед! Я действительно не смог найти какое-либо решение в Интернете.

Есть ли способ сохранить мой список кнопок в фиксированном положении, чтобы он оставался на экране во время перемещение по сечениям?

Ответ 1

Для чего-то действительно базового использования:

<a href="#middle">Go To Middle</a>

Или для чего-то простого в javascript ознакомьтесь с этим плагином jQuery ScrollTo. Очень полезно для прокрутки плавно.

Ответ 2

попробуйте следующее:

<input type="button" onClick="document.getElementById('middle').scrollIntoView();" />

Ответ 3

HTML

<a href="#top">Top</a>
<a href="#middle">Middle</a>
<a href="#bottom">Bottom</a>
<div id="top"><a href="top"></a>Top</div>
<div id="middle"><a href="middle"></a>Middle</div>
<div id="bottom"><a href="bottom"></a>Bottom</div>

CSS

#top,#middle,#bottom{
    height: 600px;
    width: 300px;
    background: green; 
}

Пример http://jsfiddle.net/x4wDk/

Ответ 4

Существует гораздо более простой способ получить эффект плавной прокрутки без JavaScript. В вашем CSS просто наведите указатель на весь HTML-тег и задайте для него поведение прокрутки: smooth;

html {
  scroll-behavior: smooth;
 }
 
 a {
  text-decoration: none;
  color: black;
 } 
 
 #down {
  margin-top: 100%;
  padding-bottom: 25%;
 }

<html>
  <a href="#down">Click Here to Smoothly Scroll Down</a>
  <div id="down">
    <h1>You are down!</h1>
  </div>
</html