Scrolltop on click

Version imprimable

Scrolltop on click

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:

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:

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

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:

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:

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:

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

12/12/2019, 17h59
NoSmoking

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:

$("html").animate({scrollTop ...
12/12/2019, 18h22
Invité

Bien vu :ccool: (je n'avais pas testé avec doctype)

Du coup, j'ai modifié mon message précédent.
31/12/2019, 11h05
Jerry80

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 ?

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

Le code qui fonctionne

Code:

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.

Version JavaScript vanilla : https://codepen.io/jreaux62/pen/yLNbOVL

Code:

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
/* SCROLL de section à section - JavaScript vanilla */
window.addEventListener("load",()=>{
  //  const sections = document.querySelectorAll(".onepage"),
  const html = document.querySelector("html");
  const up_btns = document.querySelectorAll(".up_btn");
  const down_btns = document.querySelectorAll(".down_btn");
  up_btns.forEach(function(up_btn){
    up_btn.addEventListener('click', function(){
      let section_prev = this.closest('.onepage').previousElementSibling; // section précédente
      window.scrollTo({
        top: section_prev.offsetTop,
        behavior: 'smooth',
      });
    });
  });
  down_btns.forEach(function(down_btn){
    down_btn.addEventListener('click', function(){
      let section_next = this.closest('.onepage').nextElementSibling; // section suivante
      window.scrollTo({
        top: section_next.offsetTop,
        behavior: 'smooth',
      });
    });
  });
});

+ petit ajout CSS, pour masquer les boutons inutiles :

Code:

1
2
3
4
.onepage:first-child .up_btn,
.onepage:last-child .down_btn { 
  visibility:hidden;
}