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

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

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

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

当前回答

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

其他回答

下面是一个函数，它可以包含那些固定头的可选偏移量。不需要外部库。

function scrollIntoView(selector, offset = 0) {
  window.scroll(0, document.querySelector(selector).offsetTop - offset);
}

您可以使用JQuery获取元素的高度并滚动到它。

var headerHeight = $('.navbar-fixed-top').height();
scrollIntoView('#some-element', headerHeight)

2018年3月更新

不使用JQuery滚动到这个答案

scrollIntoView('#answer-44786637', document.querySelector('.top-bar').offsetHeight)

2017-06-27 17:41:59

你不能聚焦在一个div上。你只能聚焦在该div中的一个输入元素上。此外，你需要使用element.focus()而不是display()

2011-02-15 18:07:52

Chrome和Firefox

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

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

IE、Edge和Safari的支持者

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

2018-04-15 13:17:56

我们可以通过3种方法来实现:

注意:

"automatic-scroll" =>特定元素

" scrolble -div" =>可滚动区域div

方法1:

document.querySelector('.automatic-scroll').scrollIntoView({
     behavior: 'smooth'
});

方法2:

location.href = "#automatic-scroll";

方法3:

$('#scrollable-div').animate({
   scrollTop: $('#automatic-scroll').offset().top - $('#scrollable-div').offset().top + 
   $('#scrollable-div').scrollTop()
})

重要注意:如果可滚动区域高度为“auto”，方法1和方法2将非常有用。方法3是有用的，如果我们使用滚动区域的高度，如“calc(100vh - 200px)”。

2020-10-28 07:52:29

如果您只是想滚动到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

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

推荐文章

最新文章

标签