- Offizieller Beitrag
Gibt's bei Woltlab eine extra class für links (a tag) die eine Scroll- Animation mitliefert?
Nein, das wird stets aktiv über JavaScript erzeugt. Du kannst es aber prinzipiell auch selbst bauen:
HTML
<script data-relocate="true">
require(["WoltLabSuite/Core/Ui/Scroll"], (UiScroll) => {
document.querySelectorAll(".scrollMeToTheMoon").forEach((link) => {
const href = link.getAttribute("href");
if (href.match(/#(.+)$/)) {
link.addEventListener("click", (event) => {
event.preventDefault();
const target = document.getElementById(RegExp.$1);
if (target) {
UiScroll.element(target);
}
});
}
});
});
</script>
<a href="#myElement" class="scrollMeToTheMoon">Klick mich</a>
<div style="height: 2000px"></div>
<div id="myElement">Moon</div>
Alles anzeigen
(Nur fix zusammengeschrieben, nicht getestet :D)