Scroll vers élément dynamique

Version imprimable

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:

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:

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

Bonjour,

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

Code:

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:

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:

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
    });
  });
});

29/07/2019, 17h58
Reggio

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

Merci beaucoup pour le coup de main !