Hallo, ich taste mich an jQuery ran und hab jetzt mal mit der scrollTop Funktion begonnen
Mein Code sieht jetzt so aus:
und vor dem
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
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