it-swarm.com.de

html / css-schaltflächen, mit denen Sie zu verschiedenen div-Abschnitten auf einer Webseite scrollen können

Kann mir jemand helfen, ich suche nach css/html Codebeispiel:

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

Wenn ich auf diese Schaltfläche (in der Mitte) klicke, scrollt meine Seite automatisch vom oberen Rand meiner Seite zum Abschnitt div #middle.

gleiches gilt für die anderen Schaltflächen, die sich auf div id='top' und div id='bottom' beziehen.

Vielen Dank im Voraus! Ich konnte wirklich keine Lösung im Internet finden.

Gibt es eine Möglichkeit, meine Schaltflächenliste an einer festen Position zu halten, damit sie beim Durchlaufen von Abschnitten auf dem Bildschirm bleibt?

19
JayD

Für etwas wirklich Grundlegendes benutze dies:

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

Oder schauen Sie sich für etwas Einfaches in Javascript dieses jQuery-Plugin an ScrollTo . Sehr nützlich für einen reibungslosen Bildlauf.

27
rncrtr

versuche dies:

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

[~ # ~] 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/

11
Kevin Bowersox

Es gibt einen viel einfacheren Weg, den Smooth-Scroll-Effekt ohne Javascript zu erzielen. Greifen Sie in Ihrem CSS einfach auf das gesamte HTML-Tag zu und geben Sie ihm das Scroll-Verhalten: 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

Das "Scroll-Verhalten" sagt der Seite, wie sie scrollen soll und ist so viel einfacher als die Verwendung von Javascript. Javascript bietet Ihnen mehr Optionen für Geschwindigkeit und Laufruhe, aber dies wird ohne den ganzen verwirrenden Code auskommen.

7
ihayes83