如何使用JavaScript滚动到一个元素?

我试图将页面移动到<div>元素。

我已经尝试了下一个代码无效:

document.getElementById("divFirst").style.visibility = 'visible';
document.getElementById("divFirst").style.display = 'block';

当前回答

最好的，最简短的回答是什么即使是动画效果也有效:

var scrollDiv = document.getElementById("myDiv").offsetTop;
window.scrollTo({ top: scrollDiv, behavior: 'smooth'});

如果你有一个固定的导航条，只需从顶部值中减去它的高度，所以如果你的固定导航条高度是70px，第2行将看起来像这样:

window.scrollTo({ top: scrollDiv-70, behavior: 'smooth'});

解释: 第1行获取元素位置第2行滚动到元素位置;属性添加平滑的动画效果

2019-08-01 11:52:11

其他回答

Chrome和Firefox

我一直在研究这个问题，我发现了这个问题，从某种程度上来说，这是最自然的方法。当然，这是我现在最喜欢的画卷。：）

const y = element.getBoundingClientRect().top + window.scrollY;
window.scroll({
  top: y,
  behavior: 'smooth'
});

IE、Edge和Safari的支持者

注意那个窗口。滚动({…options})在IE、Edge和Safari上不支持。在这种情况下，使用它可能是最好的 element.scrollIntoView()。(在IE 6上支持)。你很可能(读:未经测试)传入选项而没有任何副作用。

当然，这些可以被包装在一个函数中，根据所使用的浏览器来执行。

2018-04-15 13:17:56

如果您只是想滚动到div中列表的底部，您可以这样做。

<body>

<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div> 
</div>
<button>Scroll To</button>

    <script> 
        const btn = document.querySelector("button");
        const container = document.querySelector(".container"); 
        btn.addEventListener("click",()=>{
        const toplast = document.querySelector(".container").lastElementChild;
        toplast.scrollIntoView();
    })
    </script>
</body>

示例输出

2022-12-21 08:06:46

焦点只能放在互动元素上…Div只表示页面的一个逻辑部分。

也许你可以在div周围设置边框，或者改变它的颜色来模拟焦点。是的，可见性不是焦点。

2011-02-15 18:05:41

最好的，最简短的回答是什么即使是动画效果也有效:

var scrollDiv = document.getElementById("myDiv").offsetTop;
window.scrollTo({ top: scrollDiv, behavior: 'smooth'});

如果你有一个固定的导航条，只需从顶部值中减去它的高度，所以如果你的固定导航条高度是70px，第2行将看起来像这样:

window.scrollTo({ top: scrollDiv-70, behavior: 'smooth'});

解释: 第1行获取元素位置第2行滚动到元素位置;属性添加平滑的动画效果

2019-08-01 11:52:11

我认为如果你添加一个标签到你的div，它将能够获得焦点:

<div class="divFirst" tabindex="-1">
</div>

我不认为它是有效的，虽然，tabindex只能应用于一个，区域，按钮，输入，对象，选择和文本区域。但不妨试一试。

2011-02-15 18:07:25

如何使用JavaScript滚动到一个元素?

推荐文章

最新文章

标签