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

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

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

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

当前回答

如果你想使用html，你可以使用这个:

a href="samplewebsite.com/subdivision.html#id

并将其作为指向特定元素id的HTML链接。它基本上是getElementById html版本。

2014-11-03 11:54:20

其他回答

试试这个:

var divFirst = document.getElementById("divFirst");
divFirst.style.visibility = 'visible'; 
divFirst.style.display = 'block';  
divFirst.tabIndex = "-1";  
divFirst.focus();

如@:

http://jsfiddle.net/Vgrey/

2011-02-15 18:08:31

如果你想使用html，你可以使用这个:

a href="samplewebsite.com/subdivision.html#id

并将其作为指向特定元素id的HTML链接。它基本上是getElementById html版本。

2014-11-03 11:54:20

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

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

scrollIntoView工作良好:

document.getElementById("divFirst").scrollIntoView();

MDN文档中的完整引用: https://developer.mozilla.org/en-US/docs/Web/API/Element.scrollIntoView

2014-03-10 04:17:06

如果您只是想滚动到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滚动到一个元素?

推荐文章

最新文章

标签