Scroll vers élément dynamique
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