vue3-smooth-scroll

import { createApp, ref, inject } from 'vue'; import VueSmoothScroll from 'vue3-smooth-scroll'; const App = { template: ` <div id="main-content"> <h1>Vue3 Smooth Scroll Example</h1> <nav> <a href="#section1" v-smooth-scroll="{ duration: 800, offset: -20 }">Go to Section 1</a> | <a href="#section2" v-smooth-scroll="{ container: '#scrollContainer', duration: 1200 }">Go to Section 2 (in container)</a> | <button @click="scrollToMyEl" style="margin-left: 10px;">Scroll to My Element (Programmatic)</button> </nav> <div style="height: 500px; background: #f0f0f0; margin-top: 20px; padding: 20px;"> <p>Content before sections to allow sufficient scrolling space.</p> <p>This area provides initial context before the scroll targets.</p> </div> <section id="section1" style="height: 400px; background: lightblue; padding: 20px; border-radius: 8px; margin-top: 40px;"> <h2>Section 1</h2> <p>This is the first section. We will scroll here using a directive with custom options.</p> </section> <div id="scrollContainer" style="height: 300px; overflow-y: scroll; border: 1px solid #ccc; margin-top: 40px; border-radius: 8px;"> <div style="height: 600px; padding: 20px;"> <p>Content inside a custom scroll container.</p> <p>Scrolling within this container is independent of the main window scroll.</p> <div style="height: 200px; background: #e0f7fa; margin: 15px 0;">Placeholder</div> <section id="section2" ref="myContainerEl" style="height: 150px; background: lightcoral; padding: 10px; border-radius: 5px;"> <h3>Section 2 (inside container)</h3> <p>This section is specifically located inside the custom scrollable div.</p> </section> </div> </div> <div style="height: 700px; background: #f0f0f0; margin-top: 40px; padding: 20px;"> <p>More content after sections to ensure the ability to scroll back up and down.</p> <p>This helps in testing the scroll behavior effectively.</p> </div> <div ref="myEl" style="height: 100px; background: lightgreen; margin-top: 50px; padding: 20px; border-radius: 8px;"> <h3>My Programmatic Target Element</h3> <p>This element is targeted programmatically from the button click.</p> </div> </div> `, setup() { const myEl = ref(null); const smoothScroll = inject('smoothScroll'); const scrollToMyEl = () => { if (smoothScroll && myEl.value) { smoothScroll({ scrollTo: myEl.value, duration: 700, offset: -100, hash: '#myProgrammaticTarget' // Optional hash update }); } }; return { myEl, scrollToMyEl }; } }; const app = createApp(App); app.use(VueSmoothScroll, { duration: 500, updateHistory: true // Global default for history updates }); app.mount('#app');