Some text inside an element.
Some text inside an element.
Some text inside an element.
revision:
The Element interface's scrollIntoView() method scrolls the element's ancestor containers such that the element on which scrollIntoView() is called is visible to the user.
scrollIntoView()
scrollIntoView(alignToTop)
scrollIntoView(scrollIntoViewOptions)
Parameters:
alignToTop : optional. A boolean value:
If true, the top of the element will be aligned to the top of the visible area of the scrollable ancestor. Corresponds to scrollIntoViewOptions: {block: "start", inline: "nearest"}. This is the default value.
If false, the bottom of the element will be aligned to the bottom of the visible area of the scrollable ancestor. Corresponds to scrollIntoViewOptions: {block: "end", inline: "nearest"}.
scrollIntoViewOptions : optional Experimental. An Object with the following properties:
behavior : optional. Determines whether scrolling is instant or animates smoothly. This option is a string which must take one of the following values:
smooth: scrolling should animate smoothly.
instant: scrolling should happen instantly in a single jump.
auto: scroll behavior is determined by the computed value of scroll-behavior.
block : optional. Defines vertical alignment. One of start, center, end, or nearest. Defaults to start.
inline : optional. Defines horizontal alignment. One of start, center, end, or nearest. Defaults to nearest.
const element = document.getElementById("box");
element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({ block: "end" });
element.scrollIntoView({ behavior: "smooth", block: "end", inline: "nearest" });
Click "Scroll" to scroll to the top of the element with id="content".
Some text inside an element.
Some text inside an element.
Some text inside an element.
<div>
<button onclick="scrollFunction()">Scroll</button>
<p>Click "Scroll" to scroll to the top of the element with id="content".</p>
<div id="myDIV">
<div id="content">
<p>Some text inside an element.</p>
<p>Some text inside an element.</p>
<p>Some text inside an element.</p>
</div>
</div>
</div>
<style>
#myDIV {height: 25vw; width: 25vw; overflow: auto; background: coral;}
#content {margin:50vw; height: 80vw; width: 200vw;background-color: coral;}
</style>
<script>
function scrollFunction() {
const element = document.getElementById("content");
element.scrollIntoView();
}
</script>
Click the buttons to scroll to the top or to the bottom of the element with id="content".
<div>
<p>Click the buttons to scroll to the top or to the bottom of the element with id="content".</p>
<p>
<button onclick="scrollToTop()">Scroll to the top</button>
<button onclick="scrollToBottom()">Scroll to the bottom</button>
</p>
<div id="myDIV1">
<div id="content1">
<div style="position:relative;top:0;">Some text at the top</div>
<div style="position:relative;top:80vw">Some text at the bottom</div>
</div>
</div>
</div>
<style>
#myDIV1 {height: 25vw; width: 25vw; overflow: auto; background: coral;}
#content1 {margin:50vw; height: 25vw; width: 200vw;background-color: coral;}
</style>
<script>
const element1 = document.getElementById("content1");
function scrollToTop() {
element1.scrollIntoView(true);
}
function scrollToBottom() {
element1.scrollIntoView(false);
}
</script>