Tutorial

Script zum Scrollen zum Anker einer Seite

Man hat eine Seite erstellt und nutzt Sprungmarken? Wäre es nicht vielleicht schöner, wenn die Seite weich zum Anker scrollt?
Mit dem hier angebotenen Script ist dies möglich, für HTML oder auch WordPress.

Hier eine Demo

jQuery für HTML-Seiten

$(document).ready(function () {
    const marginTop = 100, //Abstand nach oben
            speed = 600, //Scrollgeschwindigkeit
            menuItem = "header nav a[href*='#']", // verschachtelte Navigation
            //menuItem = "header nav a[href*='#'],footer nav a[href*='#']", 
            //Multiple Selektoren
            curUrl = window.location.href;
    if (~curUrl.indexOf("#")) {
        const startLink = curUrl.split("#"),
                idStart = startLink[1];
        history.replaceState(null, null, ' ');
        $("body,html").scrollTop(0);
        document.fonts.ready.then(function () {
        $('html,body').animate({scrollTop: (($("#" + idStart).offset().top - marginTop))}, speed);
        });
    }
    $(menuItem).click(function (event) {
        const baseUrl = window.location.href,
                link = $(this).attr("href");
        const splitLink = link.split("#"),
                id = splitLink[1],
                regex = RegExp('([^\/]+$)', 'g'),
                baseUrlArrayReg = regex.exec(baseUrl);
        if (baseUrlArrayReg[0] == splitLink[0] || splitLink[0] == "") {
            event.preventDefault();
            $('html, body').animate({scrollTop: (($("#" + id).offset().top - marginTop))}, speed);
        }
    });
});
Kopiere Code

jQuery für HTML-Seiten

$(document).ready(function () {
const marginTop = 100, //Abstand nach oben
speed = 600, //Scrollgeschwindigkeit
menuItem = "header nav a[href*='#']", // verschachtelte Navigation
//menuItem = "header nav a[href*='#'],footer nav a[href*='#']",
//Multiple Selektoren
curUrl = window.location.href;
if (~curUrl.indexOf("#")) {
const startLink = curUrl.split("#"),
idStart = startLink[1];
history.replaceState(null, null, ' ');
$("body,html").scrollTop(0);
document.fonts.ready.then(function () {
$('html,body').animate({scrollTop: (($("#" + idStart).offset().top - marginTop))}, speed);
});
}
$(menuItem).click(function (event) {
const baseUrl = window.location.href,
link = $(this).attr("href");
const splitLink = link.split("#"),
id = splitLink[1],
regex = RegExp('([^\/]+$)', 'g'),
baseUrlArrayReg = regex.exec(baseUrl);
if (baseUrlArrayReg[0] == splitLink[0] || splitLink[0] == "") {
event.preventDefault();
$('html, body').animate({scrollTop: (($("#" + id).offset().top - marginTop))}, speed);
}
});
});
Kopiere Code

Navigation für HTML-Seiten

  <ul><li><a href="index.html">Home</a>
                        <ul>
                            <li><a href="index.html#home-abschnitt">#Abschnitt 1 Home</a></li>
                            <li><a href="index.html#home-abschnitt-2">#Abschnitt 2 Home</a></li>
                            <li><a href="unterseite-2.html">Unterseite 2</a></li>
                        </ul>
                    </li>

                    <li><a href="seite2.html">Seite2</a>
                        <ul>
                            <li><a href="unterseite-3.html#unterseite-3-abschnitt">#Abschnitt Unterseite 3</a></li>
                            <li><a href="unterseite-4.html">Unterseite 4</a></li>
                        </ul>
                    </li>

                    <li><a>Seite 3</a></li>
                    <li><a>Seite 4</a></li>
                    <li><a>Seite 5</a></li>
                    <li><a>Seite 6</a></li>
                </ul>
Kopiere Code

Navigation für HTML-Seiten

<ul><li><a href="index.html">Home</a>
<ul>
<li><a href="index.html#home-abschnitt">#Abschnitt 1 Home</a></li>
<li><a href="index.html#home-abschnitt-2">#Abschnitt 2 Home</a></li>
<li><a href="unterseite-2.html">Unterseite 2</a></li>
</ul>
</li>

<li><a href="seite2.html">Seite2</a>
<ul>
<li><a href="unterseite-3.html#unterseite-3-abschnitt">#Abschnitt Unterseite 3</a></li>
<li><a href="unterseite-4.html">Unterseite 4</a></li>
</ul>
</li>

<li><a>Seite 3</a></li>
<li><a>Seite 4</a></li>
<li><a>Seite 5</a></li>
<li><a>Seite 6</a></li>
</ul>

Kopiere Code

Im Body dem Element zum Hinscrollen eine ID vergeben, die in der Navi mit "#" gekennzeichnet ist:

<div id="home-abschnitt">

Script für WordPress (jQuery)

Falls das Theme kein weiches Scrollen unterstützt, kann man folgendes einfügen:
Folgendes Plugin biete sich an:

jQuery für WordPress

(function ($) {
    const marginTop = 10, //Abstand nach oben
            speed = 600, //Scrollgeschwindigkeit
            menuItem = ".menu-item a[href*='#']", // verschachtelte Navigation
            //menuItem = "header a[href*='#']",footer a[href*='#']",
            //Multiple Selektoren	  
            curUrl = window.location.href;
    if (~curUrl.indexOf("#")) {
        history.replaceState(null, null, ' ');
        const startLink = curUrl.split("#"),
                idStart = startLink[1];
        $("body,html").scrollTop(0);
        document.fonts.ready.then(function () {
        $('html,body').animate({scrollTop: (($("#" + idStart).offset().top - marginTop))}, speed);
        });
    }
    $(menuItem).click(function (event) {
        const baseUrl = window.location.href,
                link = $(this).attr("href");
        const splitLink = link.split("#"),
                id = splitLink[1];
        if (splitLink[0] == baseUrl) {
            event.preventDefault();
            $('html, body').animate({scrollTop: (($("#" + id).offset().top - marginTop))}, speed);
        }
    });
})(jQuery);
Kopiere Code

jQuery für HTML-Seiten

(function ($) {
const marginTop = 10, //Abstand nach oben
speed = 600, //Scrollgeschwindigkeit
menuItem = ".menu-item a[href*='#']", // verschachtelte Navigation
//menuItem = "header a[href*='#']",footer a[href*='#']",
//Multiple Selektoren
curUrl = window.location.href;
if (~curUrl.indexOf("#")) {
history.replaceState(null, null, ' ');
const startLink = curUrl.split("#"),
idStart = startLink[1];
$("body,html").scrollTop(0);
document.fonts.ready.then(function () {
$('html,body').animate({scrollTop: (($("#" + idStart).offset().top - marginTop))}, speed);
});
}
$(menuItem).click(function (event) {
const baseUrl = window.location.href,
link = $(this).attr("href");
const splitLink = link.split("#"),
id = splitLink[1];
if (splitLink[0] == baseUrl) {
event.preventDefault();
$('html, body').animate({scrollTop: (($("#" + id).offset().top - marginTop))}, speed);
}
});
})(jQuery);
Kopiere Code

Die ID im Menü versehen, absolute Pfade verwenden!
In WordPress individuelle Links auswählen und entsprechend anpassen.

https://meine-site/beitrag/#meineId