JavaScript - Smooth Scrolling

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