Button klicken -> automatisch runterscrollen?

5 Antworten

Berina270
19.02.2019, 10:04

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!

Woher ich das weiß:eigene Erfahrung
verreisterNutzer
18.02.2019, 12:01

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
Woher ich das weiß:eigene Erfahrung
Mauritan
Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer
Computer
18.02.2019, 12:19

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.
Woher ich das weiß:Berufserfahrung – ich arbeite schon sehr lange im EDV Bereich, viele Sparten
Sinuso
18.02.2019, 12:03

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.
sulox32
18.02.2019, 12:02

Benutze einfach ein OnePage Theme für Wordpress.