JavaScript - Smooth Scrolling: Unterschied zwischen den Versionen
Aus Wikizone
| (3 dazwischenliegende Versionen desselben Benutzers werden nicht angezeigt) | |||
| Zeile 2: | Zeile 2: | ||
Die unkomplizierteste Lösung für mich 2020 ist immer noch ein jQuery Snippet | Die unkomplizierteste Lösung für mich 2020 ist immer noch ein jQuery Snippet | ||
| + | |||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
$( document ).ready(function() { | $( document ).ready(function() { | ||
| Zeile 19: | Zeile 20: | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| + | |||
Viele andere Löungen inklusive. Polyfills, haben in Safari nicht funktioniert. Eine Vanilla Lösung | Viele andere Löungen inklusive. Polyfills, haben in Safari nicht funktioniert. Eine Vanilla Lösung | ||
Daher mit JavaScript (siehe auch Snippets für jQuery Lösungen). | Daher mit JavaScript (siehe auch Snippets für jQuery Lösungen). | ||
| Zeile 26: | Zeile 28: | ||
More smooth scroll techniques | More smooth scroll techniques | ||
| − | Smooth Scroll (Vanilla JS) | + | Smooth Scroll (Vanilla JS) |
| − | Smooth Scrolling (jQuery) | + | Smooth Scrolling (jQuery) |
| − | Skinny.js (jQuery) | + | Skinny.js (jQuery) |
| − | + | ||
| − | + | == cferdinandi smooth-scroll == | |
| + | Eines der verbreitetsten und recht schmal ist dieses Vanilla JS | ||
| + | https://github.com/cferdinandi/smooth-scroll | ||
| + | |||
| + | == Only CSS Solution == | ||
| + | Funktioniert 2021 überall außer IE und Safari (dort nur im experimental mode). | ||
| + | Beispiel | ||
| + | <pre> | ||
.module { | .module { | ||
scroll-behavior: [ auto | smooth ]; | scroll-behavior: [ auto | smooth ]; | ||
} | } | ||
| + | </pre> | ||
More infos at CSS-Tricks and caniuse. Thanks to DKeu for the tip! | More infos at CSS-Tricks and caniuse. Thanks to DKeu for the tip! | ||
Aktuelle Version vom 22. Juli 2021, 07:22 Uhr
Es wäre so einfach mit CSS wenn es alle unterstützen würden. Edge, IE und Safari tun es stand 2020 nicht :-(
Die unkomplizierteste Lösung für mich 2020 ist immer noch ein jQuery Snippet
$( document ).ready(function() {
//sscroll
//$(document).on('click', '.nav a[href^="#"]', function (event) {
shift = 58
duration = 250
scrollElement = 'a.scroll'
$(document).on('click', scrollElement, function (event) {
event.preventDefault();
$('html, body').animate({
scrollTop: $($.attr(this, 'href')).offset().top - shift
}, duration);
});
});
Viele andere Löungen inklusive. Polyfills, haben in Safari nicht funktioniert. Eine Vanilla Lösung Daher mit JavaScript (siehe auch Snippets für jQuery Lösungen).
https://perishablepress.com/vanilla-javascript-scroll-anchor/
More smooth scroll techniques
Smooth Scroll (Vanilla JS) Smooth Scrolling (jQuery) Skinny.js (jQuery)
cferdinandi smooth-scroll[Bearbeiten]
Eines der verbreitetsten und recht schmal ist dieses Vanilla JS
https://github.com/cferdinandi/smooth-scroll
Only CSS Solution[Bearbeiten]
Funktioniert 2021 überall außer IE und Safari (dort nur im experimental mode).
Beispiel
.module {
scroll-behavior: [ auto | smooth ];
}
More infos at CSS-Tricks and caniuse. Thanks to DKeu for the tip!
