Website Referenzen sehen besser aus, wenn sie sich bewegen.
Da Videos von manuell gescrollten Webseiten aber hakelig aussehen, zeigen wir hier, wie du smooth und kontrolliert durch deine Website scrollen kannst.
Per Tastatur zu Elementen scrollen – mit Javascript
Mit ein wenig Javascript können wir per Tastatur zu den jeweiligen Elementen scrollen, die wir ansteuern möchten. Hier die Schritt für Schritt Anleitung, wie ihr das machen könnt:
1. Alle anzusteuernde Elemente mit einer ID versehen
Um nachher im Javascript Code die entsprechenden Elemente ansteuern zu können, müssen wir ihnen in Webflow zuerst eine ID geben. Wir suchen also alle Elemente, zu denen wir scrollen möchten und geben ihnen jeweils eine ID.
In Webflow wird jedem anzusteuernden Element eine separate ID gegeben.
2. Basis Code einfügen
Nun fügen wir folgenden Code vor dem </body> Tag ein:
<script> $(document).ready(function() { $(document).keypress(function(e) { console.log(e.which); var pos = $(window).scrollTop(); var speed = 2; var one = $('#one').scrollTop(); var two = $('#two').offset().top; var three = $('#three').offset().top; var four = $('#four').offset().top; if (e.which == 49) { var distance = Math.abs(pos - one); var scrollSpeed = distance * speed; $('html, body').animate({ scrollTop: one }, scrollSpeed); } else if (e.which == 50) { var distance = Math.abs(pos - two); var scrollSpeed = distance * speed; $('html, body').animate({ scrollTop: two }, scrollSpeed); } else if (e.which == 51) { var distance = Math.abs(pos - three); var scrollSpeed = distance * speed; $('html, body').animate({ scrollTop: three }, scrollSpeed); } else if (e.which == 52) { var distance = Math.abs(pos - four); var scrollSpeed = distance * speed; $('html, body').animate({ scrollTop: four }, scrollSpeed); } }); }); </script>
Hier fügen wir die jeweiligen ID's ein, die wir vorhin erstellt haben.
Blauer Code
Die blauen Zahlen stehen jeweils für eine Taste auf der Tastatur. 49 = Taste «1» 50 = Taste «2» 51 = Taste «3», usw..
Hier verwendet man am besten die ID's 49 bis 58, um die Zahlen 1-9 und 0 als Tasten verwenden zu können.
3.1 Du brauchst mehr als 4 Scroll-Elemente?
Wenn wir mehr als vier Tasten benötigen, können wir einfach die Zeile «var four = $('#four').offset().top;» kopieren und die ID, sowie den Namen der Variabel (im Bild grün markiert) anpassen. Dann kopieren wir eines der «else if» Statements und ändern die Tasten ID (blau markiert) und den Namen der Variabel (grün markiert). Das else if Statement kannst du auch hier kopieren:
else if (e.which == 52) { var distance = Math.abs(pos - four); var scrollSpeed = distance * speed; $('html, body').animate({ scrollTop: four }, scrollSpeed); }
Bisher kennen wir nur die Tasten ID's 49-58. Wenn wir aber mehr – oder andere – Tasten benötigen, müssen wir die ID's der Tasten herausfinden. Da die Listen der Tasten-IDs aus dem Internet aber hier nicht anwendbar sind, müssen wir über einen anderen Weg herausfinden, welche Taste welche ID hat.
Dafür publishen wir zuerst die Seite und gehen auf die veröffentlichte Seite.
Dann wechseln wir mit dem Tastenkürzel CMD+Option+i in den Developer Modus.
Wir navigieren oben rechts zum Reiter «Console» (siehe Bild).
Nun klicken wir einmal ins Fenster der gerenderten Website und drücken eine Taste auf der Tastatur, von der wir die ID herausfinden möchten.
die ID wird nun rechts in der Konsole angezeigt (siehe Bild).
