Bonjour à tous,

Etant nouveau dans le monde du développement web, je commence à apprendre le Javascript via Jquery.

J'essaye d'obtenir 2 boutons dans chaque div: un qui passe à la div suivante et l'autre qui revient à la div précédente.

Les boutons fonctionnent, c'est à dire que quand je clique sur le bouton down par exemple, ma scrolltop position augmente de la taille d'une div, donc ma fenêtre descend. Mais lorsque je clique n'importe où d'autre sur la div, mon écran remonte d'un demi-écran.

Est-que vous sauriez me dire pourquoi cela arrive?

Mon
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html>
    <head>
        <link rel="stylesheet" href="css/style1.css">
        <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
        <script>
            $(document).ready(function(){
               $(".down_btn").click(function(){
                    var height = $("#blue").height();
                    var actualheight = $(window).scrollTop();
                    $("body").animate({scrollTop: actualheight + height + 1});
                });
                
                $(".up_btn").click(function(){
                    var height = $("#blue").height();
                    var actualheight = $(window).scrollTop();
                    $("body").animate({scrollTop: actualheight - height});
                });
            })
        </script>
    </head>
    <body>
        <div id="blue">
            <button class="up_btn">UP</button>
            <button class="down_btn">DOWN</button>
        </div>
        <div id="green">
            <button class="up_btn">UP</button>
            <button class="down_btn">DOWN</button>
        </div>
        <div id="red">
            <button class="up_btn">UP</button>
            <button class="down_btn">DOWN</button>
        </div>
    </body>
</html>

Mon code CSS (très certainement inutile mais comme ça vous avez tout):
Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
body{
    margin: 0;
    padding: 0;
}
#blue{
    width: 100%;
    height: 100vh;
    background-color: blue;
}
#green{
    width: 100%;
    height: 100vh;
    background-color: green;
}
#red{
    width: 100%;
    height: 100vh;
    background-color: red;
}

Exemple de ce qui arrive quand je clique sur une div après avoir cliqué sur un bouton:
https://drive.google.com/file/d/1jXK...ew?usp=sharing

Merci d'avance !

Simon Wagneur