So erstellen Sie eine Schaltfläche zum Scrollen nach oben mit JavaScript und jQuery

Eine Schaltfläche 'nach oben scrollen' wird verwendet, um Ihre Ansicht einfach zum Anfang der Seite zurückzubringen. Diese kleine UX-Funktion ist auf modernen Websites sehr verbreitet. Es ist besonders hilfreich für Webseiten mit vielen Inhalten, wie z. B. Einzelseitenanwendungen.

So finden Sie alte Nachrichten auf dem iPhone

In diesem Artikel erfahren Sie, wie Sie mit JavaScript und jQuery eine Schaltfläche zum Scrollen nach oben erstellen.

So erstellen Sie einen Scroll-to-Top-Button mit JavaScript

Mit dem folgenden Code-Snippet können Sie Ihrer Website eine Schaltfläche zum Scrollen nach oben hinzufügen:

HTML Quelltext

  
  
  
  
 Scroll-to-Top button using JavaScript  
  
  
  
  
  
  
  
  
 Scroll down the page
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.  
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.  
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.  
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.  
 
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.  
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.  
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.  
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.  
 
 
 
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.  
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.  
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.  
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.  
 
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.  
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.  
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.  
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.  
 
 

 
  
Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
 Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.  
 Maecenas eu elit vitae ipsum gravida gravida ut id erat.  
 Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.  
 Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.

Hier wird eine Grundstruktur der Webseite mit Dummy-Daten erstellt. Sie müssen sich nur auf die Schaltfläche zum Scrollen nach oben konzentrieren.

Wenn Sie auf diese Schaltfläche klicken, wird die Seite nach oben gescrollt. Dies ist nach dem Hinzufügen des jQuery-Codes funktionsfähig.

jQuery-Code

Verwandt: Erfahren Sie, wie Sie ein Element in jQuery erstellen

// ===== Scroll to Top ====  
var btn = $('#button');  
// If the page is scrolled more than 300px,  
// show the scroll-to-top button  
// Otherwise hide the button  
$(window).scroll(function() {  
 if ($(window).scrollTop() > 300) {  
 btn.addClass('show');  
 } else {  
 btn.removeClass('show');  
 }  
});  
btn.on('click', function(e) {  
 e.preventDefault();  
 $('html, body').animate({scrollTop:0}, '300');  
});

Hier das zeigen -Klasse wird dem Button-Element hinzugefügt, wenn der Benutzer mehr als 300 Pixel auf der Webseite scrollt. Dies zeigen class macht das Button-Element sichtbar. Standardmäßig wird die Sichtbarkeit des Button-Elements ausgeblendet. Weitere Details zur Schaltfläche finden Sie im folgenden CSS-Code.

CSS-Code

Verwandt: Einfache CSS-Codebeispiele, die Sie in 10 Minuten lernen können

#button {  
 display: inline-block;  
 background-color: #FF9800;  
 width: 50px;  
 height: 50px;  
 text-align: center;  
 border-radius: 4px;  
 position: fixed;  
 bottom: 30px;  
 right: 30px;  
 transition: background-color .3s,  
 opacity .5s, visibility .5s;  
 opacity: 0;  
 visibility: hidden;  
 z-index: 1000;  
}  
#button::after {  
 content: 'f077';  
 font-family: FontAwesome;  
 font-weight: normal;  
 font-style: normal;  
 font-size: 2em;  
 line-height: 50px;  
 color: #fff;  
}  
#button:hover {  
 cursor: pointer;  
 background-color: #333;  
}  
#button:active {  
 background-color: #555;  
}  
#button.show {  
 opacity: 1;  
 visibility: visible;  
}  
/* Styles for the content section */  
.content {  
 width: 77%;  
 margin: 50px auto;  
 font-family: 'Merriweather', serif;  
 font-size: 17px;  
 color: #6c767a;  
 line-height: 1.9;  
}  
@media (min-width: 500px) {  
 .content {  
 width: 43%;  
 }  
#button {  
 margin: 30px;  
 }  
}  
.content h1 {  
 margin-bottom: -10px;  
 color: #03a9f4;  
 line-height: 1.5;  
}  
.content h3 {  
 font-style: italic;  
 color: #96a2a7;  
}

Das obige CSS wird verwendet, um die Schaltfläche zum Scrollen nach oben und die Webseite zu gestalten. Sie können mit dem CSS-Code spielen und den Button nach Ihren Wünschen gestalten.

Jetzt haben Sie eine voll funktionsfähige Scroll-to-Top / Back-to-Top-Taste. Wenn Sie sich den vollständigen Quellcode ansehen möchten, der in diesem Artikel verwendet wird, ist hier der GitHub-Repository von dem selben.

Notiz : Der in diesem Artikel verwendete Code ist MIT Licensed .

Erfahren Sie mehr über die Benutzererfahrung

User Experience konzentriert sich darauf, ob ein Produkt die Bedürfnisse seiner Benutzer erfüllt. Wenn Sie Designer oder Entwickler sind, tun Sie gut daran, den Prinzipien des UX-Designs zu folgen und großartige Produkte zu entwickeln. Wenn Sie an diesem Feld interessiert sind, müssen Sie dem richtigen Pfad folgen, um loszulegen.

Es sind keine Energieoptionen verfügbar

Teilen Teilen Tweet Email Möchten Sie ein UX-Designer werden? So fangen Sie an

Es ist die Aufgabe des UX Designers, dafür zu sorgen, dass die Bedürfnisse der Softwarenutzer berücksichtigt werden und sie Freude daran haben.

Weiter lesen Verwandte Themen

Programmierung
JavaScript
jQuery

Über den Autor Yuvraj Chandra(60 veröffentlichte Artikel)

Yuvraj studiert Informatik an der University of Delhi, Indien. Seine Leidenschaft gilt der Full-Stack-Webentwicklung. Wenn er nicht gerade schreibt, erforscht er die Tiefe verschiedener Technologien.

Mehr von Yuvraj Chandra

Abonniere unseren Newsletter

Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!

Klicken Sie hier, um zu abonnieren