<header style="position: fixed; height: 50px; background: purple;width: 100%;text-align:center">HEADER</header>
<div id="app" style="height:300vh; background:green; display: flex; flex-direction: column; align-items: center;padding-top: 50px;">
<button style="font-size: 1em; cursor:pointer; background: red;" @click="scrollToElement">Scroll to Element with No Offset</button>
<button style="font-size: 1em; cursor:pointer; background: green;" @click="scrollToHiddenElement">Scroll to Element with an Offset</button>
<div style="position: relative">
<div ref="hiddenElement" style="height: 50px; position: absolute; top: -50px; pointer-events: none;"></div>
<h1 ref="element">Element You Want To Scroll To</h1>
</div>
</div>const app = new Vue({
el: "#app",
data: {},
methods: {
scrollToElement() {
this.$refs["element"].scrollIntoView({ behavior: "smooth" });
},
scrollToHiddenElement() {
this.$refs["hiddenElement"].scrollIntoView({ behavior: "smooth" });
}
}
});
External CSS
This Pen doesn't use any external CSS resources.