Smooth Scroll

Einbindung

Mit dieser Funktion können Sie über einen HTML-Anker-Link smooth zum Anker-Ziel scrollen.
Diese Funktion eignet sich auch, um einen Scroll-To-Top Button am Ende der Webseite einzufügen.

HTML - Body - JavaScript einügen

Fügen Sie dieses Javascript vor dem schließenden <body> Tag ein.

Erklärung
$("a").on('click', ... (Zeile 5) sorgt dafür, dass diese Funktion auf alle Links angewendet wird, die auf ein Ankerziel verweisen.
Dadurch lässt sich diese Funktion auch bei einem OnePage-Layout für die Scroll-Funktion bei der Navigation anwenden.
Achtung
Die Verknüpfung zu dem jQuery-Framework (Zeile 1) ist nur notwendig, wenn das Framework noch nicht in die Webseite eingebunden wurde.
Bei Bootstrap-Templates muss diese Verknüpfung nicht eingefügt werden.

Erweiterung für einen Scroll-to-Top-Button

HTML - Body - Teil 1

Fügen Sie den folgenden Code gleich nach dem öffnenden <body> Tag ein.

HTML - Body - Teil 2

Definieren Sie das Anker-Ziel für totop. Z. B. direkt im <body> Tag.

CSS

Ergänzen Sie die vorhandene CSS-Datei mit den folgenden Stylesheet-Definitionen.

					
						#myBtn {
						    display: none; /* Hidden by default */
						    position: fixed; /* Fixed/sticky position */
						    bottom: 20px; /* Place the button at the bottom of the page */
						    right: 30px; /* Place the button 30px from the right */
						    z-index: 99; /* Make sure it does not overlap */
						    border: none; /* Remove borders */
						    outline: none; /* Remove outline */
						    background-color: red; /* Set a background color */
						    color: white; /* Text color */
						    cursor: pointer; /* Add a mouse pointer on hover */
						    padding: 15px; /* Some padding */
						    border-radius: 10px; /* Rounded corners */
						    font-size: 16px; /* Increase font size */
							line-height: 24px; /* Set the line-height for better alignment inside the box */
							text-decoration: none;
						}
						
						#myBtn:hover {
						    background-color: #555; /* Add a dark-grey background on hover */
							text-decoration: none;
						}

HTML - Body - JavaScript einügen

Fügen Sie dieses Javascript vor dem schließenden <body> Tag ein.

Beispiel