Button klicken -> automatisch runterscrollen?
Ich möchte bei meiner Webseite folgendes umsetzen:
Wenn ich auf einen Button klicke, dann soll er automatisch zu einer Stelle runterscrollen. Wie kann ich das machen? Verwende als CMS WordPress.
Vielen Dank!
5 Antworten
Hallo!
Kenne ein ziemlich gutes und simples Plugin dafür, welches auch kostenlos ist.
Mit dem Plugin kannst du vom Menü bis über zu einzelnen Begriffen definieren, welche du anklickst und er automatisch zu dem gewünschten Abschnitt hin scrollt! Das Plugin heißt "Page scroll to id" und ist von malihu. Würde dir empfehlen, wenn du das Plugin durch die Dokumentation nicht auf Anhieb verstehst es gibt noch ein YouTube -Tutorial, welches das Plugin ziemlich gut beschreibt.
Wünsche dir noch viel Erfolg für deine Website!
Javascript hilft:
//EXAMPLE 1 - from the article @ https://css-tricks.com/snippets/jquery/smooth-scrolling/
//URL does not update and element focus is lost
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
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
}, 900);
//unchecken der Checkbox zum ausblenden der Navigation small
document.getElementById('hacky-input').checked = false;
return false;
}
}
});
});
Den link dann so gestalten:
#Beispiel
Es scrollt dann an die stelle mit der Gleichnamigen ID
IST EINE VON VIELEN WEGEN
Auch ich empfehle ein internets Link (=Anker). Das ist kompatibel bis Netscape 3.0, mehrfach verwendbar, selbst von anderen Seiten. Ausserdem wird es schnell verarbeitet und braucht wenig Code, damit kurze Ladezeiten.
Wenn du keinen optischen Effekt benötigst, reicht im Prinzip ein Anker.
https://de.wikipedia.org/wiki/Anker_%28HTML%29
<a href="#Ankername">Link</a>
^^So einen Link könntest du mittels CSS wie einen Button stylen. Oder du setzt das click-Event des Buttons so, dass er den Link öffnet.
Benutze einfach ein OnePage Theme für Wordpress.