Allgemeine Informationen zu Elektronik, Platinen, Programmierung, PCs und mehr...

von   am   | 3 Kommentare | aktualisiert am  | 1196 mal gelesen
6 mal als PDF heruntergeladen

jQuery - sanftes Scrollen

   no image

Ganz sanft nach oben ;-)

Sanftes Scrollen sieht einfach schöner aus.

In diesem Codeschnipsel wird eine jQuery-Funktion verwendet, die das “sanfte” Scrollen nach oben realisiert.
Viele Seiten haben inzwischen einen “Scroll wieder nach oben”-Button der, meistens unten rechts eingeblendet wird, wenn man ein wenig herunter scrollt. Diese Buttons haben meist eine feste Position und die Seite scrollt sanft nach oben und springt nicht einfach hoch. Der jQuery-Code ist sehr leicht. Im HTML-Code muss nur ein a id="#ID"-Tag mit der entsprechenden ID angegeben sein. Mit CSS lässt sich dieser Button stylen.
Natürlich verwende ich ebenso einen Button zum sanften Scrollen :-)

Script sanftes Scrollen:

 



Bewerte den Artikel, wenn du magst:
[Gesamt: 30 Durchschnitt: 4.8/5]

3 Kommentare

  1. Domberg

    Bastel mal ein
    $(document).ready(function() {...});
    drum, falls jemand versucht das in den Header einzubauen und sich wundert, warum der Button initial erst auf der Seite erscheint und dann beim Scrollen verschwindet.

    Zudem würde ich vom return value false bei click Events für Links abraten. Du möchtest wahrscheinlich das Default Verhalten vom Link unterdrücken?
    Dafür gibt es folgendes:
    $('a').click(function(event) {
    // Deine Funktion
    event.preventDefault();
    });

    Das schaltet das Default Verhalten von Links aus. Mehr dazu findest du hier Stop (Mis)Using Return False

    Hab mich die Tage selbst damit beschäftigt – das Script leih ich mir trotzdem mal kurz aus, ja? ;)

    Bewerte diesen Kommentar, wenn du magst:
    [Gesamt: 18    Durchschnitt: 4.9/5]
    • Harry Milatz

      Stimmt, das $(document).ready(function()... fehlt. Setze es gleich hier mal rein. Bei mir ist es nicht, da ich ohnehin im Footer lade.

      Grins, ja da war ich ehrlich gesagt faul und habe mich nicht damit beschäftigt :D
      Danke dafür! Werde es mal umbauen und danach hier korrigieren.

      Nur zu, dafür ist es ja hier ;)

      Bewerte diesen Kommentar, wenn du magst:
      [Gesamt: 16    Durchschnitt: 4.9/5]
  2. Harry Milatz

    Aufgrund der Hinweise von Domberg, habe ich den Code entsprechend angepasst.

    Bewerte diesen Kommentar, wenn du magst:
    [Gesamt: 17    Durchschnitt: 4.9/5]

Kommentar verfassen

Du kannst auch mit einem deiner folgenden Profile kommentieren*:


* Zustimmung zur Datenschutzerklärung
Dieses Kommentarformular speichert Name, E-Mailadresse und Inhalt, sowie die IP-Adresse für maximal 60 Tage. Für detaillierte Informationen lies bitte unsere Datenschutzerklärung.
*

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert. - HTML ist erlaubt.Du kannst folgende HTML Tags und Attribute benutzen:
<a href="" title=""> <abbr title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strong> <pre style="" class="" title="" data-url=""> <span style="" class="" title="" data-url=""> .

Top
green

BILDSCHIRM OFF.
SPAREN ON!

Ein dunkler Monitor verbraucht im Gegensatz zu einem hellen bis zu 20% weniger Strom.
Daher spare ich jetzt Energie für dich.

Harrys Welt