Frisch notiert!

Die neusten Artikel aus unserem Blog.

Mit jQuery scrollen – gewusst wie und mit wenig Aufwand.

Zuletzt aktualisiert am 29/08/2016 von Adrian Lambertz
41 Kommentare
Netzwelt, Server & Technik
/ Netzwelt / Server & Technik / 41

Sie liegen voll im Trend - sogenannte "One-Page-Layouts" auf denen über Scrolling zu den einzelnen Inhalten navigiert wird. Was oftmals nach viel Arbeit und der Benutzung eigener jQuery Plugins aussieht, kann man ganz einfach umsetzen. Hierfür benötigen wir nur 3 Zeilen ein paar Zeilen Javascript/jQuery:

Was geschieht hier genau? Ich habe hier eine normale Funktion geschrieben, die über jQuery den Abstand vom oberen Rand der Website bis zum element (ein Container mit einer Klasse) ausrechnet. Danach wird über jQuery mit .animate() die javascript Anweisung „scrollTop“ animiert, die den zuvor berechneten Abstand scrollt.Anwendung:Wir rufen einfach die eben geschriebene Funktion scrollto() auf und geben der Funktion das Element mit, zu dem gescrollt werden soll.  Der Link „News“ scrollt jetzt schön geschmeidig die Seite zu dem Element mit der Klasse .news und stoppt, wenn es bei diesem Element ankommt. Existiert kein Container mit dieser Klasse, wird auch nicht gescrollt.

Veraltete Version:

function scrollto(element){
$('html, body').animate({ scrollTop: ($(element).offset().top)}, 'slow');
};

Ihr könnt die Geschwindigkeit des Scrollings natürlich einstellen, indem Ihr das ’slow‘ durch Zahlen ersetzt. Hier gilt es zu beachten, dass in Millisekunden gerechnet wird. ‚1600‘ sind demnach 1,6 Sekunden.

Cool, oder? Ein ansehnlicher Scrolling-Effekt ohne viel Aufwand.

UPDATE:

$('a[href^=#]').on('click', function(e){
var href = $(this).attr('href');
$('html, body').animate({
scrollTop:$(href).offset().top
},'slow');
e.preventDefault();
});

Der Code bewirkt, dass alle Links, die als Ziel einen Anker (ID) haben, zu scrollen. Das hat von Vorteil, dass selbst bei abgeschaltetem Javascript die Seite zu den passenden Ankerpunkten springt.
Falls man nicht möchte, dass alle Links mit einem Anker darauf reagieren, kann man ebenfalls noch mit Klassen arbeiten, um das Scrolling speziell für die Verlinkungen zu aktivieren. Gebe dazu einfach statt

$('a[href^=#]').on('click' ....

folgendes ein:

$('.scroll').on('click' ....

Und statte die Verlinkungen, die von dem JS angesprochen werden sollen mit der klasse class=“scroll“ aus.

Adrian Lambertz

Seit 2010 bin ich nun schon bei Pixelbar mit dabei. Zuerst als Auszubildender und nach erfolgreichem Abschluss meiner Ausbildung als Frontend-Entwickler. Ohne Musik und Kaffee kann ich nicht leben, daher konsumiere ich beides während der Arbeit praktisch durchgehend :). Daneben liebe ich WordPress - darauf habe ich mich spezialisiert.

Weitere Beiträge von adrian anzeigen

41 Kommentare

  1. In Sachen Zugänglichkeit dürfte dies wohl der schlechtest denkbare Workaround sein. Wenn man die Scroll-Funktion unbedingt an einen Verweis hängt, sollte dieser auch ohne JS funktionieren, das heißt, href muss ein ordentliches Ziel (einen Anker im Dokument statt Klasse oder ID eines Elements) zugewiesen bekommen. Ich würde das so lösen:

    $(‚a[href^=#]‘).bind(„click“, function(scroller)
    {
    scroller.preventDefault();
    var ziel = $(this).attr(„href“);
    $(‚html,body‘).animate({scrollTop:$(ziel).offset().top}, ’slow‘);
    });

    Btw: „$(‚html,body‘)“ kann wohl in alten Operas Probleme machen.

    1. Hallo Stefan,

      da hast du auf jeden Fall recht – mittlerweile nutze ich auch genau die selbe Lösung über Anker, bzw. IDs die angesprochen werden.

      Ich nutze meist allerdings statt .bind(‚click‘, function(scroller){}) einfach die .on(‚click‘,function(scroller){}) – funktioniert tadellos (ebenfalls auf Mobilgeräten).

      Aber Danke für den Hinweis – hatte den Blogeintrag nicht mehr angerührt. Werde Ihn aber anpassen :-)
      Viele Grüße

  2. Gibt es auch eine Möglichkeit, zu sagen, dass es mir zu einem Ankerpunkt/DIV + 100px von Oben scrollen soll? Der Hintergrund ist, dass ich oben eine fixe Navigation habe, die z.B. 100px hoch ist. Wenn ich jetzt zum Ankerpunkt verlinke, ist dieser ja noch von der Navigation verdeckt. Ich hoffe, dass ich mein Problem gut geschildert hab ;-)

    1. Hey collin, klar, das ist garkein Problem:

      erweitere die Funktion doch einfach dahingehend, dass du der Scrollfunktion einfach die Höhe des Elements abziehst:

      function scrollto(element){
      $(‚html, body‘).animate({ scrollTop: ($(element).offset().top – 100)}, ’slow‘);
      };

      So wird das Scrolling immer um 100 Pixel reduziert und dein Block bleibt sichtbar. Alternativ kannst Du die Höhe auch automatisch berechnen lassen:

      function scrollto(element){
      $(‚html, body‘).animate({ scrollTop: (($(element).offset().top)) – ($(‚#ELEMENT‘).outerHeight())}, ’slow‘);
      };

      Setze anstelle des #ELEMENT einfach die ID/Klasse des Blockes ein und jQuery ermittelt automatisch über outerHeight() die Höhe (inkl. Paddings) des Elementes.

      Ich hoffe, ich konnte dir weiterhelfen!

  3. Für Standard a-name-tags, vllt nützlich, wenn man nix ändern will:

    $(function() {
    $(‚a[href^=#]‘).on(‚click‘, function(e){
    $(‚html, body‘).animate({
    scrollTop:$(‚a[name^=’+$(this).attr(‚href‘).replace(‚#‘,“)+‘]‘).offset().top },’slow‘);
    e.preventDefault();
    });
    });

  4. im Hinblick auf den mobile Chrome würde ich eher $(document) als Selektor verwenden. $(„html,body“) ist afaik auch deprecated.

    Grüsse, Jo

  5. Ich finde eure Scroll To Funktion super. Ich habe probiert das mit der Mousewheel-Funktion zu kombinieren. Unabhängig voneinander funktionieren beide Pugins aber wenn ich auf meiner ONPage Seite zuerst die Scroll to Funtion benutze um per Klick zu einem Anker/Element scroll und versuche dann mit der mousewheel Funktion wieder nach oben zu scrollen geht’s es nicht mehr nach oben- nur noch nach unten. Als wenn der Scroll-Balken alles verschiebt!? Ich finde das auf der Seite von http://www.judith-lotter.de ganz gut… finde aber keine Lösung für diese Scroll to Funktion :/

    1. Hey Matt,

      dann müsste man während der Scroll-Animation das Mousewheel abschalten, sodass es erst dann wieder greift, wenn die Seiten wieder „stillstehen“.
      Auf welcher Seite nutzt Du denn die Scripts? Dann kann ich es mir mal ansehen :-)

      Viele Grüße

  6. Hi Adrian,

    irgendwie klappts bei mir nicht so ganz. Ich habe eine ID #crarr, mit der ich, wenn man draufklickt, zu einem Element/einer Klasse .fb-comments runterscrollen möchte. So sieht mein Code aus:

    jQuery(‚#crarr‘).click(function(){
    var element = ‚.fb-comments‘;
    function scrollto(element){ jQuery(‚html, body‘).animate({ scrollTop: (jQuery(element).offset().top)}, ’slow‘); };
    });

    Ich habe mich für diese einfache Variante entschieden, da wir in unserer Firma sowieso nur Kunden bedienen, die JavaScript aktiviert haben. Vor den Funktionen steht jQuery statt $, da das in WordPress nur so funktioniert und leider kann ich die Seite auch z. Z. nicht vorzeigen, da da so ein Site Offline/Maintenance-Drecks-Plugin aktiviert ist, was ich nicht deaktivieren darf (laut Vorgesetztem).

    Der Grund, warum es nicht funktioniert, ist höchstwahrscheinlich ein ganz Einfacher, aber ich als Noob steh‘ davor wie der Ochs vorm Berg… Hoffentlich habe ich den Sinn der Codezeilen wenigstens geblickt und sie bewirken das, was ich beabsichtige.

  7. Jupidu, ich hab’s hingekriegt…
    Mein code, so wie wahrscheinlich auch gemeint:
    function scrollto(element){ jQuery(‚html, body‘).animate({ scrollTop: (jQuery(element).offset().top)}, ’slow‘); };

    jQuery(‚#crarr‘).click(function(){
    scrollto(‚.fb-comments‘);
    });

  8. Grüß Dich Adrian,

    dies ist mein JC-Code:

    $(document).ready(function() {
    // Alle internen Links auswählen
    $(‚a[href*=#]‘).bind(„click“, function(event) {
    // Standard Verhalten unterdrücken
    event.preventDefault();
    // Linkziel in Variable schreiben
    var ziel = $(this).attr(„href“);
    //Scrollen der Seite animieren, body benötigt für Safari
    $(‚html,body‘).animate({
    //Zum Ziel scrollen (Variable)
    scrollTop: (($(ziel).offset().top)) – ($(‚#headernav‘).outerHeight())
    // Dauer der Animation und Callbackfunktion die nach der Animation aufgerufen wird, sie stellt das Standardverhalten wieder her und ergänzt die URL
    }, 2000 , function (){location.hash = ziel;});
    });
    return false;
    });

    Habe auch schon die erste Variante Probiert ging haber auch nicht.
    Man merkt zwar das Code an der Stelle es zu probieren wagt, dann aber wieder nach unten springt.
    Ich muss 90px abziehen, was als height: 90px in dieser id headernav deklariert ist.
    Bitte lieber Adrian helfe mir dabei, es müsste doch eigentlich funktionieren???

    LG Micha

      1. Danke dir mein Bester. Echt nett von dir!
        Ich habe dein interessantes Profilbild gesehen, das mit dem Querstrich und den Pixeleffekt. Kann ich dir per Dropbox mal ein Bild von mir zukommen lassen und du gestaltest mir evtl. auch so ein ähnliches? Würde mich freuen, denn es ist mir bisher einmalig untergekommen und gefällt mir super. Vielleicht gibt du mir deine E-Mail-Adresse?

        Viele Grüße
        Micha (mueller1983@gmx.net)
        PS: das Ergebnis: http://www.sensual-delight.de

  9. Vielen Dank für diesen Beitrag!
    Ich jedoch noch eine Frage.

    Ich nutze ebenfalls jQuery zu scrollen einer onepage.
    Wenn ich auf den Link meiner Navigation klicke scrollt die Seite zu der gewünschten . Dabei gibt es jedoch ein Problem.
    Die Navigation, welche sich fixed oben befindet verdeckt dadurch immer einen Bereich der .
    Ist es möglich die Seite nicht ganz so weit runter zu scrollen (also die Höhe der Navigation davon abzuziehen)?

    Ich hoffe Sie verstehen mich ansonsten gerne nachfragen.
    Vielen Dank!

    Mirco

    1. Hallo Mirco,

      klar, kein Problem, schaue dir den Code mal an:

      $('a[href^=#]').on('click', function(e){
          var href = $(this).attr('href');
          $('html, body').animate({
              scrollTop:$(href).offset().top - $('HEADERKLASSE').outerHeight()
          },'slow');
          e.preventDefault();
      });
      

      Da noch die Klasse „HEADERKLASSE“ mit der ID/Klasse des fixen headers angeben und dann hast du’s :-)

  10. Hallo zusammen

    Das ist ein sehr interessanter Beitrag!
    Gibt es mit jquery auch die möglichkeit z.b. 40px oberhalb des id-ankers zu springen?
    Mein Problem ist, dass bei der mobilen Ansicht, meine „titleBar“ den Anfang meines Inhalts überdekt.
    mfg ueli

    1. Hallo,

      ja, natürlich ist das möglich. Statisch minus 40px wäre es so:

      $('a[href^=#]').on('click', function(e){
          var href = $(this).attr('href');
          $('html, body').animate({
              scrollTop:$(href).offset().top - 40
          },'slow');
          e.preventDefault();
      });
      

      Das ganze kann man auch dynamisch aufbauen, um evtl. veränderung die Höhe des Header automatisch zu nehmen:

      $('a[href^=#]').on('click', function(e){
          var href = $(this).attr('href');
          $('html, body').animate({
              scrollTop:$(href).offset().top - $('HEADERKLASSE').outerHeight()
          },'slow');
          e.preventDefault();
      });
      
  11. Moin Moin Adrian,
    ich versuche bisher gebens für meine onepage-bootstrap-page einen Zusatz zur scrollto funktion zu finden. Für die Navigation oder Buttons, die einem zur nächsten section bringen, funtkioniert das super.

    Jetzt kommt die evtl sehr blöde Frage: Ist es möglich via Javascript, die Ankerpunkte sprich via mousewheel/finger swipe zu ermöglichen?
    Wenn ich also beim scrollen zwischen zwei ’sections‘ bin (sagen wir section a und section b), das automatisch section b an die top position des Monitors/Handybildschrims gescrollt wird?
    Ähnlich wie bei onepagecroll.js von Pete Design, nur das ich in der Höhe flexibel bin?
    Ich hoffe es ist verständlich und lösbar! :)

  12. Bei mir klappt garnichts:

    $(‚a[href^=#]‘).on(‚click‘, function(e){
    var href = $(this).attr(‚href‘);
    $(‚html, body‘).animate({
    scrollTop:$(href).offset().top
    },’500′);
    e.preventDefault();
    });

    (javascript ist an)

  13. Hi Adrian,
    dein Beispiel funktioniert suuuper!

    Ich habe eine One-Page mit Anker-Menü damit realisiert! :-)

    Nun kam mir noch die Idee, unten mittig auf der Webseite einen Pfeil-Button einzubauen, der beim Anklicken zur jeweils nächsten Seite runter scrollt, so dass man es nicht von Hand tun braucht.

    Ich bin noch am Lernen von JavaScript und mein Plan war es, ein Array zu basteln, um dann jeweils eine Seite weiter zu springen, ungefähr so (bitte nicht lachen):
    ———————————————————–

    var MyLocation=window.location;

    var MyPage=new Array;{
    MyPage[0]=“#first“;
    MyPage[1]=“#second“;
    MyPage[2]=“#third“;
    MyPage[3]=“#fourth“;
    MyPage[4]=“#fifth“;
    MyPage[5]=“#sixth“;
    MyPage[6]=“#seventh“;
    MyPage[7]=“#last“;
    }

    function GoForward(){
    ThisPageNumber=ThisPageNumber+1;
    if (ThisPageNumber >=MyPage.length) {
    ThisPageNumber=ThisPageNumber-1;
    }
    else {
    window.location=MyPage[ThisPageNumber];
    }
    }

    ———————————
    Dazu müsste ich aber vorher noch die genaue Anker-Position (in der URL?) auslesen, damit das Skript dazu die Seite addieren kann…
    …und da hört mein Plan leider auf.

    Der HTML-Quelltext ist recht simpel: EIn großes umgebendes mit einzelnen für die Seiten. (div – section – article)

    Würde mich sehr über eine Antwort freuen! :-)

  14. Vielen Dank für dein schönes Script!
    Wie könnte ich denn noch hinzufügen, daß er dann die links auf aktiv setzen soll?

    Vielen Dank, falls du das auch noch dazusagen kannst.
    Ich weiß zwar, daß manche das mit
    $(this).removeClass( „notSelected“ ).addClass( „Selected“ );
    aber bei mir geht das nicht – bin auhc nicht sicher ob das hier sinn macht. Irgendwie müsste es ja alle links erstmal auf inaktiv setzen und dann nur den einen auf aktiv.

    Weißt du wiedas geht, in diesem Fall?

    Danke für deine Hilfe!
    Irmen

  15. Den Scroll-to-top-Pfeil kann muss man ja nicht nur bei Single-Page-Designs einsetzen, sondern auch bei anderen Seiten, auf denen der Inhalt sehr lang ist/wird.
    Ich bastel gerade an einem responsive Design, und hätte es gerne, dass der scroll-to-top-Pfeil erst erscheint, wenn der Inhalt länger wird als das Fenster, in dem sich der Inhalt befindet. (schließlich siehts ja komisch aus, wenn ich den kompletten Inhalt sehe, aber darunter klebt der Pfeil).

  16. Hallo Adrian,

    ich habe einen fixen header der sich durch ein responsives Bild in der Höhe verändert (Bildschirmgröße ändern). Somit habe ich zum darauffolgenden container immer einen anderen Abstand da ich ja padding-top benötige.
    Kann ich mittels script die Höhe des headers auslesen und die Position oder den Padding des containers anpassen?

    mfg Simon

    1. Habe eine eigene Lösung gefunden. Anbei der Code:

      $(document).ready(function() {

      var divHeight= $(‚#header‘).height();
      $(‚#container‘).css({
      paddingTop:(divHeight-24)+“px“
      });

      });

      LG Simon

    1. Vermutlich hast du dir versehentlich ein Werbeprogramm oder ähnliches eingehandelt. Check doch mal die Plugins/Addons deines Browsers und ggf. die installierten Programme in der Systemsteuerung.

  17. Hallo Adrian,

    danke für den schönen Denkanstoß!

    Ich habe das Script nochmal etwas angepasst, um „normale“ (konforme) Anker nutzen zu können. Das war wichtig, weil viele WYSIWYG-Editoren eine Aknker-Funktion anbieten, die auf dem Standard Anker-Tag ( beruht.

    Hier meine Lösung:

    $(function() {
    $(‚a[href*=#]‘).bind(‚click‘, function(event) {
    event.preventDefault();
    var target = $(this).attr(‚href‘).replace(‚#‘, “);
    $(‚html,body‘).animate({
    scrollTop: $(‚a[name^=’+target+‘]‘).offset().top – $(‚#headernav‘).outerHeight()
    }, 500, function (){location.hash = target;});
    });
    return false;
    });

    Viele Grüße

    Stephan | http://www.serialinternet.de

  18. Hallo Adrian,

    ich hab es alles in eingebunden im head-bereich, doch trotz aktiviertem JavaScript geht es nicht.

    Hab den Updatet-Code verwendet, und eine div mit einer ID erstellt, welche ich in einem Link (a href=“#…“) aufrufe. Wieso geht das nicht? Die Seite springt weiter wie gewohnt zu dem Anker.

  19. Hallo Adrian

    Vielen Dank für dieses einfache, verständliche Script.
    Kann es sein, dass der Code mit der neueren Version von jQuery (1.12) nicht funktioniert? Was kann ich da anpassen? Oder würdest Du einfach eine ältere Version beibehalten?

    Liebe Grüsse

  20. Nachtrag: Hab den Fehler gefunden:
    Beim Selektor fehlen ums Rautezeichen zwei Anführungsstriche:

    $(‚a[href^=“#“]‘)

    Jetzt läufts. Vielen Dank fürs Script!

  21. Hallo Leute,

    ich habe eine riesen bitte …… ich habe eine homepage über einen selbstbaukasten erstellt und wollte eine kleine spielerei einbauen (Über die bearbeitungs option….

    und zwar soll das fenster automatisch scrollen ….
    mein ergoogelter code :

    //

    aber das das fenster „springt“ runter ….. gibt es eine möglichkeit das ganze „smooth“ zu machen ?

    Lg und danke.

      1. offensichtlich zu blöd so einen code zu posten …… -.-

        $(document).ready(function(){
        setTimeout(function() {

        window.scroll(0,700)

        }, 2500);

        });

  22. Hi,
    scrollen in einem jQuery DataTable , falls das jemand benötigt:

    <table id="example"
    ..

    Hugo
    Habicht

    ..

    $(‚.dataTables_scrollBody‘).animate({
    scrollTop: $(‚#example tbody tr[id=“00017″]‘).offset().top – 130
    },’slow‘);

    funktioniert auch :
    $(‚.dataTables_scrollBody‘).animate({
    scrollTop: $(‚ tr[id=“00017″]‘).offset().top – 130
    },’slow‘);

    Hugo

  23. Ich fand den Komentar zimlich überflüsig und sie solten ihre rechtschreibung deudlich verbesern
    mit neten grüsen
    Roland Weidl

  24. So habe hier mal eine funktionierende Version gebastelt, in den Beispielen oben ist “
    $(document).ready(function() {“ nicht mit dabei deshalb funktioniert es bei einigen nicht.

    Der folgende Code hat einen Offset von 100px und 1800ms Animation Time.-

    _____________________________

    $(document).ready(function() {
    $(‚a[href^=“#“]‘).on(‚click‘, function(e){
    var href = $(this).attr(‚href‘);
    $(‚html, body‘).animate({
    scrollTop:$(href).offset().top – 100
    },’1800′);
    e.preventDefault();
    });})

    _____________________________

  25. HI!
    Das letzte Bsp funktioniert genau einmal. Wenn man dann schon am gerscrollten Anker ist, muss ich den Anlkerlink ein 2tes Mal klicken, dass ich das richtige Verhalten erhalte.
    Hat hier noch jem. einen Rat?

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert