时间戳

首页 > 解决方案 > Javascript滚动到元素

javascript - Javascript滚动到元素

问题描述

我正在尝试制作一个小幻灯片菜单。每张幻灯片都是 100vh，我想用我的菜单滚动到每张幻灯片。

我做了查询和听众，现在我尝试让每次点击都转到正确的#slide。

幻灯片的数量将是动态的。

我不是 javascript 超级英雄，所以我希望我一切都好！

提前感谢您的帮助和建议。

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(document.getElementById(`slide3`)));
    });
}

function findPos(obj) {
    var curtop = 0;
    if (obj.offsetParent) {
        do {
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
    return [curtop];
    }
}
<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>

标签： javascript

解决方案

谢谢，现在可以了，我只需要动态访问幻灯片的ID...

推荐阅读