Discussion :

[Reggio]

Hello,

J'essaie de créer un petit menu dynamique pour scroller vers différentes sections. Je pense avoir fait le plus gros mais je bloque sur la fin

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
<ul id="slide-menu"></ul>
 
<div id="slide1" class="slide">
    <h2>Slide 1</h2>
</div>
 
<div id="slide2" class="slide">
    <h2>Slide 2</h2>
</div>
 
<div id="slide3" class="slide">
    <h2>Slide 3</h2>
</div>
 
<div id="slide4" class="slide">
    <h2>Slide 4</h2>
</div>

Code :

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
 
let sections = document.querySelectorAll('.slide')
let nbrMenuLinks = sections.length;
 
for(i = 0; i < nbrMenuLinks; i++) {
    const li  = document.createElement('li');
    li.className = 'scroll-item';
    li.id = 'btn'+(i+1);
    li.appendChild(document.createTextNode((i+1)));
    document.querySelector('#slide-menu').appendChild(li);
    li.addEventListener('click', ()=>{
        window.scroll(0,findPos('li#'+(i+1)));
    });
}
 
 
const findPos =  (obj) => {
    let curtop = 0;
    if (obj.offsetParent) {
        do {
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
    return [curtop];
    }
}

Je n'arrive pas à scroller vers le #slide qui a le même id que mon li, il me manque la bonne syntaxe...

Merci pour votre aide et et éventuels conseils si ce n'est pas très propre

[Invité]

Bonjour,

Voir : https://codepen.io/jreaux62/pen/jOEBbeW

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
<nav id="slide-menu"></nav>
 
<section id="slide1" class="slide">
    <h2>Slide 1</h2>
</section>
 
<section id="slide2" class="slide">
    <h2>Slide 2</h2>
</section>
 
<section id="slide3" class="slide">
    <h2>Slide 3</h2>
</section>
 
<section id="slide4" class="slide">
    <h2>Slide 4</h2>
</section>

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
html, body {
  width:100%;
  min-height:100vh;
  margin:0; padding:0;
}
/* SLIDE MENU */
#slide-menu {
  position:fixed;
  top:0;
  right:0;
}
#slide-menu ul {
  list-style:none;
  margin:0; padding:0;
  background:lightgreen;
}
#slide-menu li {
  cursor:pointer;
   padding:5px 15px;
  color:darkgreen;
  text-decoration:none;
}
#slide-menu li:hover {
  color:white;
  background:darkgreen;
}
/* SLIDE SECTIONS */
section {
  background:#ccc;
  margin:0; padding:0;
  min-height:100vh; /* mini 100% hauteur fenêtre */
}
section > h2 {
  background:green;
  margin:0; padding:10px 15px;
  color:white;
  text-align:center;
}

Code JavaScript :

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
"use strict";
const slide_sections = document.querySelectorAll('.slide');
const slide_menu = document.querySelector('#slide-menu');
 
slide_sections.forEach( function(section){
  // création dynamique du menu
  let ul = document.createElement('ul');
  slide_menu.appendChild(ul);
  let li = document.createElement('li');
  li.appendChild(document.createTextNode( section.children[0].textContent )); // contenu du <h2>
  ul.appendChild(li);
  // click sur li
  li.addEventListener('click', function(){
    window.scroll({
      top: section.offsetTop, 
      left: 0, 
      behavior: 'smooth' // smooth slide
    });
  });
});

[Reggio]

Cool ça marche à merveille et le code est plus simple

Merci beaucoup pour le coup de main !