HTML/CSS-Schaltflächen, die zu verschiedenen div-Abschnitten auf einer Webseite scrollen

Kann mir jemand helfen ich suche css/html Codebeispiel:

Ich habe eine Webseite mit 3 Schaltflächen (oben, Mitte, unten), die jeweils auf 1 div-Abschnitt auf meiner Seite festgelegt sind. Nehmen wir an, mein erster div-Abschnitt befindet sich in der Mitte dieser Seite div id='middle'.

Wenn ich auf diese Schaltfläche (Mitte) klicke, würde meine Seite automatisch vom oberen Rand meiner Seite nach unten scrollen div #middle Sektion.

dasselbe gilt für die anderen Schaltflächen, auf die sich div bezieht id='top'und div id='bottom'

Danke im Voraus! Im Internet habe ich wirklich keine Lösung gefunden.

Gibt es eine Möglichkeit, meine Schaltflächenliste an einer festen Position zu halten, damit sie auf dem Bildschirm bleibt, während sie sich durch Abschnitte bewegt?

Für etwas wirklich Grundlegendes verwenden Sie Folgendes:

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

Oder schauen Sie sich für etwas Einfaches in Javascript dieses jQuery-Plugin an ScrollTo. Ziemlich nützlich, um reibungslos zu scrollen.

Versuche dies:

<a href="#To%20top">Scroll to top</a>

Wenn Sie reibungsloses Scrollen wünschen:

html {
  scroll-behavior: smooth;
 }

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; 
}

Beispiel http://jsfiddle.net/x4wDk/