"NACH OBEN" - Link am Rand der Webseite

Hallo Zusammen, ich hab nun schon auf einigen Seiten die längeren Text oder Inhalt hatten einen dynamisch erscheinenden "NACH OBEN" Link gesehen.
Also praktisch nach dem man etwas nach unten scrollt und stehen bleibt, erscheint dieser.
Auch generelle Links die vom Seitenrand heraus erscheinen und wieder wegklappen....

Ist das ein JS Effekt? Gibts da ne Extension oder nach was müsste ich suchen?

Finde ich ganz nett!

Grüße
Messen

schau mal HIER

Ich würde einen entsprechenden Button auch gern einbauen (XING hat auch so'n Teil).
Habe es auch mithilfe dieser Seite ohne Contao hinbekommen.

Mit Contao scheint aber das Skript nicht erkannt/gelesen zu werden:

Code:

---

$(document).ready(function(){

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

        // scroll body to 0px on click
        $('#back-top a').click(function () {
            $('body,html').animate({
                scrollTop: 0
            }, 800);
            return false;
        });
    });

});

---

Ich habe es sowohl in direkt in den Head-Tag des Templates als auch als Verlinkung in den Head-Tag eingebaut. Zudem habe ich die Extension "jquery" installiert.

Das Problem ist nun, dass der Button sofort erscheint und nicht ers dann, wenn ich runterscrolle, wie es eigentlich sein soll. Das "sliden" nach oben funktioniert dagegen astrein.

Mein Verdacht ist nun, dass da irgendwelche Skripte miteinander kollidieren... leider bin ich diesbezüglich nicht sonderlich bewandert.
Für Hilfe wäre ich sehr dankbar!

Du musst den button in deinem css erst mal auf visibility hidden stellen.

Ich ermute, dass Du die Animationen mit css umsetzt. Solltest du die css dateien auch noch komprimiert ausgeben, kann es mit den @anweisungen Probleme geben.

@mike: wenn ich den Wert im CSS auf "visibility:hidden" stelle, ist der Button ganz weg und erscheint auch nicht beim herunterscrollen.
Die Animation wird mit javascript umgesetzt.

Die entsprechende CSS-Datei sieht so aus:

Code:

---

#back-top {
    bottom: 30px;
    display: block;
    margin-left: 87%;
    position: fixed;
    visibility: hidden;
    z-index: 10000;
}
#back-top span {
    background-image: url("../../tl_files/_standards/_icons/topbttn.png");
    background-repeat: no-repeat;
    display: block;
    height: 54px;
    width: 70px;
}
#back-top span:hover {
    background-image: url("../../tl_files/_standards/_icons/topbttnOver.png");
    background-repeat: no-repeat;
    display: block;
    height: 54px;
    width: 70px;
}

---

Und im Template steht:

Code:

---

<div id="back-top">
<a href="{{env::request}}#top"><span></span></a>
</div>

---

Hast Du mal eine Link, wo ich mir das anschauen kann?

Nur mal so am Rande: Für so ein kleines popeliges Script würde ich doch nicht noch ne zweite große JS-Bibliothek wie jquery neben mootools setzen. Kannst das gleiche Dingen doch mit der MooTools-Lösung von David Walsh machen.

ps In der Firebug Konsole bekommst du JS-Fehler angezeigt.

@Andreas

Ja, mit David Walsh hat es nun hingehauen. Ich stand da zunächst auf dem Schlauch... Danke!

Firebug hatte übrigens keine Fehler angezeigt...

@mike: leider hätte ich noch keinen Link zeigen können, da das Projekt noch nicht spruchreif und somit etwas sensibel ist... ;)