"nach-oben-button-pfeil"

Hallo, ich möchte gerne auf meiner ZETA Homepage einen Pfeil nach oben zum scrollen einrichten.
Im ZETA-Schnipsel habe ich auch schon mal was gefunden. Auf einer anderen meiner Homepages funktioniert dieser auch. (http://www.fotostudio-w.de)

Auf einer anderen Homepage nur fehlerhaft.. (http://www.fotow.de) Der Button ist mir, persönlich, etwas zu klein. Ich hätte ihn doch gerne deutlich

größer. Und die Pfeile sind nicht mittig im Kreis, - zu weit links. Der Pfeil erscheint auch zu spät, erst, wenn ich ganz unten gescrollt habe. Später erscheint

er dann früher, schon auf "halber Strecke".
Ich kann machen, was ich will, ich kann die Positionierungen nicht verändern. Sicherlich auch

mangels Verständnis innerhalb der CSS-Scripte. Wer kann mir kurz helfen ? Vielen Dank !!

Zitat von Mario

Ich würde mal temporär die Animationen abschalten, gut möglich das es Konflikte gibt.

Die Größe kannst du im CSS im Abschnitt ".obenkreis" und ".obenpfeil" unter "font-size:" vorgeben.

Ab welcher Scrollposition eingeblendet wird bestimmst du im Script unter " if ($(this).scrollTop() > 200) {".

Danke für die Rückinfo. Trotz ausgeschalteter Animation sind die Pfeile zu weit links (nicht zentriert im Kreis)
Kreisgröße konnte ich optimieren, aber die Pfeile bleiben linksbündig. ScrollTOP>200 war schon genau so drin.
Da konnte ich deinen Tipp einer Veränderung nicht umsetzen.

Dennoch muss ich erst einmal ganz nach unten scrollen, bis dann, später, der "Scrollkreis" auftaucht.
Also, keine Veränderung.

Zitat von Mario

Ich habe das mal durchgetestet.

Das späte einblenden kommt definitiv von der Animation. Du hast das Script mit in einem Container der erst beim scrollen eingeblendet wird. Am besten du packst das Widget mit dem Script ganz am Ende der Seite und gibst ihm einen eigenen Container ohne Animation. Dann funktioniert das.

Warum der Pfeil linksbündig dargestellt wird konnte ich nicht nachstellen. Aber du kannst diesen im CSS nach rechts verschieben. Füge im CSS unter ".obenpfeil" ein left:6px; hinzu und passe den Wert entsprechend an.

YES - YES - YES.. so klappt es.. Vielen, vielen Dank, Mario !!

Zitat von axelwestdoerp

YES - YES - YES.. so klappt es.. Vielen, vielen Dank, Mario !!

Zitat von Mario

Ich habe das mal durchgetestet.

Das späte einblenden kommt definitiv von der Animation. Du hast das Script mit in einem Container der erst beim scrollen eingeblendet wird. Am besten du packst das Widget mit dem Script ganz am Ende der Seite und gibst ihm einen eigenen Container ohne Animation. Dann funktioniert das.

Warum der Pfeil linksbündig dargestellt wird konnte ich nicht nachstellen. Aber du kannst diesen im CSS nach rechts verschieben. Füge im CSS unter ".obenpfeil" ein left:6px; hinzu und passe den Wert entsprechend an.

Ach so.. muss nicht noch ein "NACH OBEN" bzw "zum Seitenanfang" erscheinen, wenn man mit der mouse über den Pfeil geht, so, wie bei vielen Seiten und auch hier, im Forum zu sehen ?
Wie mache ich das dann ?

Zitat von Mario

Ich habe das mal durchgetestet.

Das späte einblenden kommt definitiv von der Animation. Du hast das Script mit in einem Container der erst beim scrollen eingeblendet wird. Am besten du packst das Widget mit dem Script ganz am Ende der Seite und gibst ihm einen eigenen Container ohne Animation. Dann funktioniert das.

Warum der Pfeil linksbündig dargestellt wird konnte ich nicht nachstellen. Aber du kannst diesen im CSS nach rechts verschieben. Füge im CSS unter ".obenpfeil" ein left:6px; hinzu und passe den Wert entsprechend an.

Wie schon geschrieben, alles OK !! Super.. vielen Dank !!! Kann man die Pfeile noch vergrößern, bevor die Mouse drüber fährt, sind die Pfeile noch recht klein.
Und, könnte es Sinn machen, da dann auch noch den Text einzublenden "nach oben" oder "zum Seitenanfang", wenn die Mouse drüber fährt ? Und, wie macht man das ? Vielen Dank !

Zitat von Mario

Folgender Abschnitt bestimmt unter "font-size:" die Größe des Pfeiles vor und beim hovern.

.obenpfeil {

font-size:32px;

color:#fff;

position:relative;

top:3px;

transition: all 0.2s ease;

}

.obenpfeil:hover {

top:-3px;

font-size:36px;

}

Dem Link kannst du einen Titel geben. Dieser wird dann beim Hovern eingeblendet.

<a href="#top" Title="Nach OBEN">

<span class="fa-stack fa-lg">

<i class="obenkreis fa fa-circle fa-stack-2x"></i>

<i class="fa fa-angle-double-up fa-stack-1x obenpfeil"></i>

</span>

</a>

Alles anzeigen

Zur "kleinen Pfeil / großen Pfeil" habe ich ausprobiert. Funktioniert nicht, also, keine Wirkung. Liegt bestimmt daran, dass wir noch ein LEFT: 3px dazu fügen, weil der Pfeil bei uns
nicht "mittig" war, sondern eher links, am Anschlag des Kreises. Beide Pfeile sind jetzt gleich groß.. komisch...