"Nach oben" Widget: Wie einstellen, daß es so ist wie hier im Forum?

Friedrich

Hallo Zeta-Fans,

jetzt habe ich je ein "Nach oben" Widget unter jedem Container, also hunderte insgesamt; außerdem siehts unbeholfen altbacken aus.

Ich möchte es so haben wie hier im Forum - den finde ich toll.

Im Widget finde ich aber nicht die Einstellungen dafür.
Den Forums-Pfeil "nach oben" habe ich kopiert, aber unten einfügen (also einfach klauen) funktioniert leider auch nicht.

Wer verrät mir bitte, was muß ich tun, damit ich auch den "nach oben"-Pfeil bekomme, wie hier im Forum (am besten in grün)?

Hanabi

Hallo Friedrich,

da gibt es von Mario , einem sehr aktiven Freund dieses Forums, unter https://www.widget-zp.de/nach-oben-scrollen.html eine passende externe Lösung. Bitte beachte, dass Marios Widgets außerhalb von Zeta entwickelt werden und daher keine "Garantie" auf ein Funktionieren unter allen Versionen und Layouts gegeben werden kann. Für spezielle Fragen betreibt Mario aber ein eigenes Forum, auf welches wir hier bei Bedarf https://www.zella.de/forum/forum/ gern verweisen.

Friedrich

Danke Hanabi,

ha - sieht toll aus, habe hunderte der altbackenen Standart-Nach-oben-Widgets gelöscht. Hätte mir die unnötige Mühe dafür gespart, wenn ich gleich vom modernen Nach-oben-Widget gewußt hätte. Super Tipp.

Scrollziel ändern

Noch besser ist es, wenn es sofort wieder ´n Stück runterscrollt bis zum Inhaltsverzeichnis (oberstes Text-Widget). Das verbessert das Orientierungsgefühl der Leser und sie siehen, ohne erneut scrollend unterhalb Seitenname/Slogan, Hauptmenü, Slider, Navigationspfad und Überschrift das Inhaltsverzeichnis suchen zu müssen, was er auf dieser Seite sonst noch findet.

Wahrscheinlich kommt er von allein auch gar nicht sofort auf die Idee, nochmal ins Inhaltsverzeichnis zu blicken und ist weg. Besser, er bekommt unaufgefordert das Inhaltsverzeichnis serviert.

Wie kann man

das Scrollziel auf einen bestimmten Artikel/Text-Widget ändern,
bzw. ein weiteres Abwärts-Scrollziel ergänzen?

Mario

Hallo Friedrich,

das lässt sich mit dem Widget nicht umsetzen, aber mit DIESEM CODE ginge das schon.

Du müsstest in dem Code jeweils das Sprungziel #top mit der Artikelnummer deines gwünschten Sprungzieles austauschen. Also zB.: #a1824.

Das würde in etwa so aussehen: LINK

Friedrich

Danke Mario,

das sieht auf der Beispielseite super aus, so will ich das auch für meine - perfekt nutzerfreundlich.

Bisher hab ich noch nie Code benutzt und verstehe die Anleitung wohl noch nicht richtig.

Was ich gemacht habe:

Das auf alle Seiten vererbte Widget "WZP-Nach-oben-Scollen V1.0" vorerst nicht gelöscht. sondern nur auf der Startseite ausgeblendet. Stört das evtl.?
Aus der verlinkten Anleitung aus dem oberen Texteingabefeld "CSS Code"
habe ich unter "Einstellungen > CSS" vorerst noch nichts eingefügt, weil dort schon ein Code drinsteht (und ich nichts falsch machen wollte):
<style>

.zpContainer,
body:not(.withnews) .zpContainer.zpBreakout:not(.hasNews){
padding-top: 30px !important;
padding-bottom: 30px !important;
}
</style>

Oder soll der Code darüber- oder daruntergefügt oder ersetzt werden?
Aus dem unteren Texteingabefeld "Quelltext" habe ich den Code kopiert
und links im Navigationsmenübaum unter "Start > Zahnrad > bearbeiten > Attribute > Standart > footer_script" eingefügt.
Dann (3. Zeile): <a href="#top">
geändert in: <a href="#a15411">
Denselben kopierten "Quelltext" habe ich per "Erweitert > Attribute > footer_script" eingefügt.
Hier habe ich das Sprungziel "#top" noch nicht individuell angepaßt, weils für mich aussieht, daß es dort wohl für alle Seiten gelte.

Nach veröffentlichen erscheint noch kein Nach-oben-Pfeil. Was kann ich machen?

Mario

Für deinen besonderen Fall ist da schon etwas mehr Arbeit nötig da du jeweils auf den ersten Artikel verlinken möchtest musst du den Code auf jeder Seite anpassen.

1. Lösche jeden Code den du jetzt hinzu gefügt hast. Sowie das Widget nach oben.

2. Unter Einstellungen > CSS fügst du unter oder über dem vorhandenen Code diesen Code hinzu:

Code

<style>
.obenkreis {
width: 40px;
height: 40px;
border-radius: 50px;
background-color: rgba(0,102,0,0.9);		/* Hintergrundfarbe (Kreis) */
animation: anitop 1s;
}
@keyframes anitop {
0%{opacity:0}
100%{opacity:1}
}
.obenpfeil-1, .obenpfeil-2 {
border: solid #fff;						/* Farbe Pfeile */
border-width: 0 3px 3px 0;
display: inline-block;
padding: 5px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
position:absolute;
left:50%;
margin-left:-6px;
transition: all 0.2s ease;
}
.obenpfeil-1 {
top:15px;
}
.obenpfeil-2 {
top:22px;
}
.obenkreis:hover .obenpfeil-2 {
top:8px;
}
#back-top2 {
position: fixed;
bottom: 5%;
right:5%;
z-index: 1000;
}
#back-top2  span{
display: block;
}
@media (max-width: 1680px) {
#back-top2 {
bottom: 5px;
right:5px;
}}
</style>

Alles anzeigen

3. Unter "Erweitert > Attribute > footer_script" fügst du nur das Script, also letzten Teil des Quelltextes ein:

Code

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){

// hide #back-top
$("#back-top2").hide();

// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 200) {
$('#back-top2').fadeIn();
} else {
$('#back-top2').fadeOut();
}
});

// scroll body to 0px
$('#back-top2 a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 500);
return false;
});
});
});
//]]>
</script>

Alles anzeigen

4. Auf deiner ersten Seite fügst du das Widget > Quelltext mit folgendem Inhalt als letzten Artikel der Seite ein und gibst ihm vorerst eine Überschrift:

Code

<div id="back-top2" style="display: block; ">
<a href="#top">
<span class="obenkreis">
<i class="obenpfeil-1"></i>
<i class="obenpfeil-2"></i>
</span>
</a>
</div>

Nun sollte auf der Ersten Seite "Nach Oben funktionieren. Und du musst diesen Code noch auf den ersten Artikel verlinken.

Öffne den ersten Artikel der Seite
Klicke unten Links auf das Mischpult > Mehr > Rechts + > unten Rechts nochmal +
Hier steht deine Artikelnummer. Ich nenne sie mal "0815"
Nun musst du den Link in dem Widget Quelltext anpassen. Ändere das #top in #a0815 (natürlich nicht mit 0815 sondern mit deiner Artikelnummer).
Wenn alles wie gewünscht funktioniert kannst du die Überschrift im Widget Quelltext löschen. Dieses ist in der Live-Vorschau nicht mehr greifbar. Hierzu musst du mit der Taste "F8" in den Spaltenmodus schalten. Hier ist die Artikelnummer auch einfacher ersichtlich.

5. Für alle anderen Seiten kopierst du das Widget der ersten Seite, fügst es jeweils wieder an letzter Position ein und änderst entsprechend die Artikelnummer.

PS: Mache dir Notizen was du wo eingefügt hast, dann hast du es später einfacher. Für weitere Kommunikation hierzu bitte im entsprechenden FORUM.

Friedrich

Hurra, danke Mario!

Pfeil sogar in grün und fährt zum eingestellten Artikel. Viel besser als vorher - Danke für Deine blitzschnelle genaue leicht verständliche Anleitung.

Nur leider direkt, noch ohne Umweg über #top, wie auf Deiner Beispielseite, was die Orientierung wesentlich verbessert.

Wenn ich Dich richtig verstehe, antwortest Du dazu wohl lieber im verlinkten Forum. In dem Fall versuch ich mich nochmal dort.

Mario

Zitat von Friedrich

Wenn ich Dich richtig verstehe, antwortest Du dazu wohl lieber im verlinkten Forum. In dem Fall versuch ich mich nochmal dort.

Ich antworte genau so hier. Der Support hier im Forum möchte sich aber hier auf die Hilfe zu den Funktionen des Programmes konzentrieren. ohne ständig Beiträge zu Fremdcodes mitlesen zu müssen.

"Nach oben" Widget: Wie einstellen, daß es so ist wie hier im Forum?

Scrollziel ändern

Jetzt mitmachen!

Hilfe zum Support-Forum

Wollen Sie eine professionelle Website erstellen?