JavaScript - Smooth Scrolling: Unterschied zwischen den Versionen
Aus Wikizone
| 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) |
| + | |||
CSS solution | CSS solution | ||
| + | |||
Just a heads up for latest Chrome, Firefox, or Opera, you can enable smooth scroll via the scroll-behavior property (no JS required!), for example: | Just a heads up for latest Chrome, Firefox, or Opera, you can enable smooth scroll via the scroll-behavior property (no JS required!), for example: | ||
| − | + | <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! | ||
Version vom 22. Juli 2021, 07:20 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)
CSS solution
Just a heads up for latest Chrome, Firefox, or Opera, you can enable smooth scroll via the scroll-behavior property (no JS required!), for example:
.module {
scroll-behavior: [ auto | smooth ];
}
More infos at CSS-Tricks and caniuse. Thanks to DKeu for the tip!
cferdinandi smooth-scroll
Eines der verbreitetsten und recht schmal ist dieses Vanilla JS
https://github.com/cferdinandi/smooth-scroll
