Prosty kod jQuery nie działa

0

Jestem początkujący w jQuery i żeby poćwiczyć stworzyłem prosty scroll button. Polega on na tym ze kiedy przewinę okno do określonego momentu, na ekranie pojawi się przycisk. Po kliknięciu strona przewinie się do samej góry. O ile przycisk pojawia się prawidłowo, to niestety nie reaguje na kliknięcie :/

HTML

<!DOCTYPE HTML>
<html lang="pl">
 
<head>
    <meta charset="utf-8" />
    <title> strona </title>
    <meta name="description" content="Nice description" />
    <meta http-equiv="X-UA-Compatible" content="IE=chrome, edge=1" />

    <link rel="stylesheet" href="style.css" style="text/css" />

</head>

<body>

<div class="kon"></div>
<div class="kon"></div>
<div class="kon"></div>
<div class="kon"></div>

<div id="btn">UP</div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <script src="skrypt.js"></script>

</body>

</html>

javascript

$(document).ready(function () {

    var a = 500;

    $(window).scroll(function () {
        if ($(this).scrollTop() > a) {
            $('#btn').fadeIn(300)

        } else {
            $('#btn').fadeOut(300)
        }
    })

    $('#btn').on('click', function () {
        $('body').animate({ scrollTop: 0 }, 500);
    })

})

CSS

body
{
    background-color: burlywood;
    width: 100%;
    margin: 0;
    padding: 0;
}

.kon:nth-child(1)
{
    width: 100%;
    height: 650px;
    z-index: 1;
    background-color: blueviolet;
}

.kon:nth-child(2)
{
    width: 100%;
    height: 650px;
    z-index: 1;
    background-color: aqua
}

.kon:nth-child(3)
{
    width: 100%;
    height: 650px;
    z-index: 1;
    background-color:darkgoldenrod
}

.kon:nth-child(4)
{
    width: 100%;
    height: 650px;
    z-index: 1;
    background-color:cornflowerblue
}

#btn
{
    width: 80px;
    height: 80px;
    border: 1px solid #000000;
    border-radius: 50%;
    background-color: cornsilk;
    position: fixed;
    text-align: center;
    line-height: 80px;
    bottom: 60px;
    right: 60px;
    z-index: 100;
    
}

#btn:hover
{
    transition: 100ms;
    transform: scale(0.9);
    cursor: pointer;
}
1

Wrzuciłem za Ciebie ten kod na JSFiddle - https://jsfiddle.net/5u6gbL89/

W ten sposób łatwiej jest pytającemu uzyskać pomoc, bo każdy zainteresowany może sobie wejść na fiddle i od razu zobaczyć, jak to działa. Nie trzeba niczego kopiować, zapisywać itp, od razu masz działającą wersję.

Ponadto taka uwaga - w podanym przykładzie nie dałeś treści/zapełniacza strony. Piszesz coś o przewijaniu i o tym, że coś ma się pojawić po przewinięciu, ale jeśli strona nie posiada za bardzo treści, to ciężko przetestować ten Twój kod. Oczywiście - nie jest problemem dodanie sobie jakiejś treści, ale to Ty powinieneś się postarać dać nam działający przykład, na którym będziemy mogli popracować :P

3

Masz problem z funkcją

$('body').animate({ scrollTop: 0 }, 500);

screenshot-20190801223647.png
kiedy zamienisz powyższą na

window.scrollTo(0, 0);

to wszystko działa jak należy (pomijając animację :p)

Podczas pisania posta znalazłem rozwiązanie :D

Zamień swoją funkcję na

$("html, body").animate({ scrollTop: 0 }, 500);

1 użytkowników online, w tym zalogowanych: 0, gości: 1