lieben Dank, ich habe es jetzt mit folgendem zusätzlichem Code hinbekommen:
<script>
function Scrolldown() {
window.scrollBy({ top: -90, left: 0, behavior: "smooth" });
}
window.onload = Scrolldown;
</script>Jetzt muss ich da "bloß" noch die media queries ergänzen für meine beiden Varianten. Allerdings habe ich dann die doppelte "function"-Ausgabe und irgendwie funktioniert das nicht
Hallo ihr Lieben,
ich habe folgendes Problem und finde einfach keine Lösung, vielleicht kann mir Jemand helfen:
Ich habe einen Onepager mit einer Ankernavigation - die Navigation sitzt fixed und bei Klick auf die Anker scrollt man zur jeweiligen Position, soweit funktioniert alles. Wenn ich jedoch die Seite mit einem Anker unabhängig von der Navigation lade, dann greift der Code zum Scrollen zur jeweiligen Position nicht und meine Inhalte sind abgeschnitten..
<script>
// smooth scrolling
function screenMin1651() {
'use strict';
var mq = window.matchMedia("(min-width: 1651px)");
return mq.matches;
}
function screenMax1650() {
'use strict';
var mq = window.matchMedia("(max-width: 1650px)");
return mq.matches;
}
console.log(screenMin1651() + " " + screenMax1650());
if (screenMin1651()) {
var $root = $('html, body');
$('a[href*=#]:not([href=#])').click(function() {
'use strict';
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top-145
}, 800);
return false;
}
}
});
}
if (screenMax1650()) {
var $root = $('html, body');
$('a[href*=#]:not([href=#])').click(function() {
'use strict';
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top-90
}, 800);
return false;
}
}
});
}
</script>