Im Widget "Nach oben" das Scrollziel href="#top" verändern

    Hallo Zusammen, erst mal allen hier im Forum ein wunderbares neues Zeta-Jahr.

    In einem Projekt wäre es optimal, wenn das Widget "Nach oben" nicht ganz nach oben scrollt, sondern beim ersten Artikel der Seite stoppt.

    Frage: Gibt es eine Möglichkeit, das Ziel "#top" im href des Widget gegen ein Artikel-ID (als Beispiel "#a3027") auf der Seite auszutauschen?

    Weitere Überlegung: Da das Widget auf allen Seiten des Projektes wiederholt, wäre ein konstantes Ziel noch besser a la "breadcrumb" oder "content". Dass der Scroll dabei erstmal über das Ziel rauläuft und dann "abfedert" ist ja sogar ein netter visueller Effekt dabei.

    Viele Grüße & Danke

    Nachtrag zu #1

    Den Teil "Scroll über das Ziel rausläuft und abfedert" nehme ich zurück. Weil, dass kann niemand verstehen, der nicht vor meinem Monitor sitzt :saint:  

    Hatte dem Scroll des Widgets durch ein Script noch einen zweiten Scroll mitgegeben. Das war bei identischem Ziel #top nie aufgefallen. Nachdem ich dann im Inspektor rumprobiert habe, kam's raus: Zuerst der Scroll rauf bis #top danach wieder runter bis #breadcrumb. Das war das "Abfedern".

    Oh ohhh, Jugend forscht :)

    So könntest du das umsetzen. Hier die BEISPIELSEITE

    • Gehe zur Wurzelseite (vermutlich die Startseite).
    • Füge dort wo hin gescrollt werden soll das Widget Quelltext mit folgendem Inhalt ein.
    Code
     <span id="ziel"><span>
    • Dieses vererbst du dann auf die anderen Seiten. Unten auf das Mischpult > auf allen Seiten anzeigen.

    • Am Ende der Seite fügst du wieder per Widget Quelltext folgendes ein:
    Code
    <p style="text-align:center;"><a class="scroll" href="#ziel"><img alt="" src="https://www.zella.de/bilder/up.png"></a></p>

<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event) {
event.preventDefault();
$('html,body').animate( { scrollTop:$(this.hash).offset().top-200 } , 600);
} );
} );
</script>
    • Der Wert 600 ist die Scroll-Geschwindigkeit, der Wert -200 gibt an wie weit über das Ziel hinaus geschossen wird bevor brav zum Ziel zurück gescrollt wird.
    • Auch diesen Artikel vererbst du auf die anderen Seiten.

    Hinweis:

    • Der Artikel mit dem Ziel ist in der Live-Vorschau nicht mehr greifbar. Hierzu mit der Taste F8 in den Spaltenmodus wechseln.
    • Bei der Vererbung wird unter Umständen die Reihenfolge der Artikel nicht korrekt übernommen. Um dies zu kontrollieren und anzupassen ebenfalls in den Spaltenmodus wechseln.

    Hallo Mario,

    danke für die coole Lösung. Funktioniert bestens bis auf das "Abfedern", das sieht echt klasse aus auf Deiner Beispielseite.

    Bei mir klappt das Abfedern leider nicht. Warum auch immer, es liegt am Layout: Im Stripe Responsive klappt das Abfedern auf Anhieb, im Album Responsive (das verwende ich) geht nix. Das Script scrollt bis zum Offset und bleibt da stehen.

    Könnte womöglich an einer der Java-Ressourcen liegen, aber das ist pures Ratespiel vom "Halbwissenden".

    Bitte fühle Dich nicht aufgefordert, hier eine Lösung zu finden. Ich bin auch glücklich mit der Lösung ohne Abfedern.

    Viele Grüße, Jochen

    Nachtrag: Eigene Lösung, weil es mir keine Ruhe gelassen hat.
    Zwei Scrolls hintereinander in's Script, dann klappt das Abfedern auch mit Album Responsive:

    $('html,body').animate( { scrollTop: $(this.hash).offset().top-100 } , 400);

    $('html,body').animate( { scrollTop: $(this.hash).offset().top }, 800);

    Abschließender Nachtrag zur Eingangsfrage aus #1 "das Ziel "#top" im href des Widget gegen ein anderes Ziel austauschen?

    Geht mit einem Script. Am Ende der Seite per Widget Quelltext einfügen.

    Code
    <script>
$(document).ready(function(){
$("a.zpSO-Uplink").attr({href: "#1359"});
});
</script>

    1359 im Script ist ein Beispielwert, den durch das ID des echten Zieles ersetzen.

    Mir ist klar, dass der Thread besser in's Entwicklerforum passt, so wie sich die Diskussion entwickelt hat.

    Die "kleine" Lösung, das href des Widgets "Nach oben" zu ändern kann aber vielleicht mal anderen Zeta-Usern helfen.

    Viele Grüße, Jochen

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!

Benutzerkonto erstellen Anmelden