So ermöglichen Sie es Benutzern, auf der Website zu einem bestimmten Block zu scrollen
So funktioniert's
Soll die Aufmerksamkeit des Benutzers auf einen bestimmten Bereich Ihrer Seite gelenkt werden, kann automatisch zu diesem Block gescrollt werden. Dafür ist ein benutzerdefinierter HTML-Code erforderlich. Sie können eine bestehende Lösung nutzen oder Ihren eigenen Code hinzufügen.
Wie komme ich dazu
Bestehende Lösung nutzen
- Öffnen Sie Ihr Projekt im Kundenportal.
- Klicken Sie in der Seitenleiste auf Site Builder.
- Klicken Sie auf Site Builder öffnen.
- Fügen Sie eine Schaltfläche zum dem Block hinzu, bei dem der Scrollvorgang beginnen soll. Ändern Sie den Text der Schaltfläche.
- Legen Sie Link als Komponententyp fest und kopieren Sie einen beliebigen Link in das Feld.
- Fügen Sie im Block Benutzerdefinierter Code den folgenden Code ein:
Copy
- html
<script>
(function() {
var scrollBlock = '.block--header';
var scrollBlockNumber = 0;
var scrollButtonNumber = 0;
var scrollToBlockName = '.block--packs';
var scrollToBlockNumber = 0;
var button = document.querySelectorAll(scrollBlock)[scrollBlockNumber].querySelectorAll('.ui-site-calltoaction--link')[scrollButtonNumber];
button.href = 'javascript:void(0)';
button.addEventListener('click', function () {
var scrollTo = document.querySelectorAll(scrollToBlockName)[scrollToBlockNumber];
scrollTo.scrollIntoView({ behavior: 'smooth' });
});
})();
</script>
- Modifizieren Sie die folgenden Parameter:
scrollBlock
: Name der CSS-Klasse des Blocks, der die Schaltfläche zum Scrollen enthält. Möglich sind:- .block--header (Header-Block)
- .block--hero (Call-To-Action-Block)
- .block--packs (Pakete-Block)
scrollBlockNumber
: Fortlaufende Nummer des Blocks, der die Schaltlfläche zum Scrollen enthält. Der Mindestwert ist0
.scrollButtonNumber
: Fortlaufende Nummer der Scrollen-Schaltfläche. Der Mindestwert ist0
.scrollToBlockName
: Name der CSS-Klasse des Blocks, zu dem gescrollt werden soll. Möglich sind:- .block--header (Header-Block)
- .block--hero (Call-To-Action-Block)
- .block--html (Benutzerdefinierter Code-Block)
- .block--packs (Pakete-Block)
- .block--description (Beschreibung-Block)
- .block--gallery (Galerie-Block)
- .block--requirements (Systemanforderungen-Block)
- .block--faq (FAQs-Block)
- .block--embed (Social-Media-Widgets-Block)
- .block--news (Neuigkeiten-Block)
- .block--footer (Footer-Block)
scrollToBlockNumber
. Fortlaufende Nummer des Blocks, zu dem gescrollt werden soll. Der Mindestwert lautet0
.
- Klicken Sie auf Vorschau, um sich die Änderungen anzeigen zu lassen.
Tutorial-Video zur Anleitung:
Eigenen Code hinzufügen
- Klicken Sie im Site Builder auf Block hinzufügen und dann auf Benutzerdefinierter Code.
- Fügen Sie Ihren eigenen Code in den Block ein.
War dieser Artikel hilfreich?
Vielen Dank für Ihr Feedback!
Wir werden Ihr Feedback aufgreifen und dazu nutzen, Ihr Erlebnis verbessern.Nützliche Links
Letztmalig aktualisiert: 22. Januar 2024Haben Sie einen Tippfehler oder einen anderen Textfehler gefunden? Wählen Sie den Text aus und drücken Sie Strg+Eingabe.