• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

[ERLEDIGT] scrollTop blinkt und der scroll-balken funktioniert danach nicht

Ansophie

Mitglied
Hallo, ich taste mich an jQuery ran und hab jetzt mal mit der scrollTop Funktion begonnen

Mein Code sieht jetzt so aus:

Code:
<button class="btn__scroll-up">
    <span class="chevron__art-1"></span>
    <span class="chevron__art-2"></span>
</button>

CSS:
button{
    border: none;
}
.btn__scroll-up{
    background-color: #add29f;
    border-radius: 4px;
    bottom: 1.25rem;
    color: #ffffff;
    cursor: pointer;
    height: 2.3rem;
    opacity: 0.6;
    position: fixed;
    right: 0.4rem;
    width: 2.3rem;
}
.btn__scroll-up:hover{
    opacity: 1;
}
.chevron__art-1{
    border: solid #ffffff;
    border-width: 0 3px 3px 0;
    display: inline-block;
    left: 50%;
    margin-left: -6px;
    padding: 5px;
    position: absolute;
    transform: rotate(-135deg);
    transition: all 0.2s ease;
}
.chevron__art-2{
    border: solid #ffffff;
    border-width: 0 3px 3px 0;
    display: inline-block;
    left: 50%;
    margin-left: -6px;
    margin-top: -8px;
    padding: 5px;
    position: absolute;
    transform: rotate(-135deg);
    transition: all 0.2s ease;
}

Javascript:
$(document).ready(function () {

    $(".btn__scroll-up").hide();

    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) {
            $(".btn__scroll-up").fadeIn();
        } else {
            $(".btn__scroll-up").fadeOut();
        }
        $(".btn__scroll-up").click(function () {
            $("body, html").animate({
                scrollTop: 0
            }, 500);
            return false;
        });
    });
});

und vor dem </body>-tag steht bei mir
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="scripts.js"></script>

meine Recherche führt mich grad nur mehr zu return false und der check beim Validator ergibt leider noch 10 Fehler. (die Formatierungsfehler habe ich schon behoben, aber ob die beim copy/paste hier übernommen wurden, weiß ich nicht).

Taugt der Code überhaupt was, oder bin ich auf dem Holzweg?

bitte seid so nett und sagt mir, wie/wo ich mit der Recherche weitermachen soll.

lg, ansophie
 
Werbung:
Zurück
Oben