Scrolltop on click

**Jerry80** · 12/12/2019, 11h56

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

Invité · 12/12/2019, 15h25

Bonjour,

https://codepen.io/jreaux62/pen/yLNbOVL

On peut raisonnablement penser que :

il y aura d'autres éléments dans chaque page (articles,...),
chaque page pourrait faire plus que 100% de la hauteur (en fonction du contenu, redimensionnement de la fenêtre,...)

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
36
37
38
39
40
41
<main>
  <section class="onepage" id="blue">
    <nav>
      <button class="up_btn" title="slide UP">↑</button>
      <button class="down_btn" title="slide DOWN">↓</button>
    </nav>
    <h2>Section 1</h2> 
    <article>
      blabla
    </article>
    <article>
      blabla
    </article>
  </section>
  <section class="onepage" id="green">
    <nav>
      <button class="up_btn" title="slide UP">↑</button>
      <button class="down_btn" title="slide DOWN">↓</button>
    </nav>
    <h2>Section 2</h2>
    <article>
      blabla
    </article>
    <article>
      blabla
    </article>
  </section>
  <section class="onepage" id="red">
    <nav>
      <button class="up_btn" title="slide UP">↑</button>
      <button class="down_btn" title="slide DOWN">↓</button>
    </nav>
    <h2>Section 3</h2>
    <article>
      blabla
    </article>
    <article>
      blabla
    </article>
  </section>
</main>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
.onepage{
    width: 100%;
    min-height: 100vh;
}
#blue{ background-color: blue; }
#green{ background-color: green; }
#red{ background-color: red; }

Code jQuery :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function(){
	$('html').on('click', '.down_btn', function(){
		if($(this).closest('.onepage').next().offset())
		{
			$('html').animate({scrollTop: $(this).closest('.onepage').next().offset().top});
		}
	});
	$('html').on('click', '.up_btn', function(){
		if($(this).closest('.onepage').prev().offset())
		{
			$('html').animate({scrollTop: $(this).closest('.onepage').prev().offset().top});
		}
	});
})

$(this).closest('.onepage').next().offset().top : on cible la <section class="onepage"> la plus proche, puis la position top de la suivante
$(this).closest('.onepage').prev().offset().top : on cible la <section class="onepage"> la plus proche, puis la position top de la précédente

**NoSmoking** · 12/12/2019, 17h59

Bonjour,
une chose quand même c'est qu'en présence d'un <!DOCTYPE html> cela ne devrait pas fonctionner.

Il est préférable d'animer le html et non le body

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("html").animate({scrollTop ...

Invité · 12/12/2019, 18h22

Bien vu

(je n'avais pas testé avec doctype)

Du coup, j'ai modifié mon message précédent.

**Jerry80** · 31/12/2019, 11h05

Bonjour jreaux62,
Bonjour NoSmoking,

Merci pour vos réponses.

J'ai essayé ta méthode jreaux62, qui à l'air en effet bien plus méthodique et optimisée, mais le problème persiste.

Je me suis rendu compte que le problème venait de Chrome. En effet, j'ai testé le code sur Firefox et Explorer et aucun problème.

Savez-vous d'ou ça peut venir ? Peut-être faut-il le rapporter à Chrome ?

**NoSmoking** · 02/01/2020, 17h11

En prenant en compte toutes les remarques faites je ne rencontre pas de soucis sur Chrome !

Le code qui fonctionne

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html>
<html>
<head>
<style>
.onepage {
  width: 100%;
  min-height: 100vh;
}
#blue  { background-color: blue;}
#green { background-color: green;}
#red   { background-color: red;}
</style>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
$(document).ready(function () {
  $('html').on('click', '.down_btn', function () {
    if ($(this).closest('.onepage').next().offset()) {
      $('html').animate({
        scrollTop: $(this).closest('.onepage').next().offset().top
      });
    }
  });
  $('html').on('click', '.up_btn', function () {
    if ($(this).closest('.onepage').prev().offset()) {
      $('html').animate({
        scrollTop: $(this).closest('.onepage').prev().offset().top
      });
    }
  });
})
</script>
</head>
<body>
  <section class="onepage" id="blue">
    <div>
      <button class="up_btn">UP</button>
      <button class="down_btn">DOWN</button>
    </div>
    <article> blabla </article>
    <article> blabla </article>
  </section>
  <section class="onepage" id="green">
    <div>
      <button class="up_btn">UP</button>
      <button class="down_btn">DOWN</button>
    </div>
    <article> blabla </article>
    <article> blabla </article>
  </section>
  <section class="onepage" id="red">
    <div>
      <button class="up_btn">UP</button>
      <button class="down_btn">DOWN</button>
    </div>
    <article> blabla </article>
    <article> blabla </article>
  </section>
</body>
</html>

à tester donc.

Scrolltop on click

jQuery

Vue hybride

Discussions similaires

Partager

Partager