MDN address

There is a pager at the bottom of the page, but every time you click to switch the page number, you need to restore the page to the top

grammar

element.scrollIntoView(); // Equates to element.scrollinToView (true) Element.scrollintoView (alignToTop); // Boolean element. ScrollIntoView (scrollIntoViewOptions); // Object parametersCopy the code

There are two ways to write parameters

AlignToTop: Boolean value type

+ true the top of the element will be aligned with the top of the visible area of the scroll area it is in, equivalent to scrollIntoViewOptions: {block: “start”, inline: “Nearest “} default + false The bottom of the element will be aligned with the bottom of the visible area of the scrolling area it is in, equivalent to the scrollIntoViewOptions: {block: “end”, inline: “nearest”} default

ScrollIntoViewOptions: Object type (optional)

An object containing the following attributes:

Behavior optionally defines the animation transition effect, either “auto” or “smooth”. The default is “auto”. Block optionally defines vertical alignment, one of “start”, “Center “, “end”, or “nearest”. The default is “start”. Inline Optionally defines one of the horizontal alignment of “start”, “Center “, “end”, or “nearest”. The default is “nearest”.

The sample

var element = document.getElementById("box");
element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"});
Copy the code

Case study:

Effect Each time the button is clicked, the new element is at the bottom of the scroll area

<template> <div> <div ref="contain" class="container"></div> <button @click="toadd"> <script> export default { data() { return { num: 1 }; }, methods: { toadd() { this.num++; let outdom = this.$refs.contain; let vli = document.createElement("li"); vli.innerText = this.num; outdom.appendChild(vli); vli.scrollIntoView({ behavior: "smooth", block: "end" }); }}}; </script> <style> .app { text-align: center; width: 100vw; height: 100vh; } .container { width: 100px; height: 200px; margin: 0 auto; border: 1px solid #ccc; overflow: auto; } button { width: 100px; display: block; margin: 30px auto; } li { margin-top: 20px; } </style>Copy the code