Vue2 Smooth Scroll
Simple vue smooth scroll extended from vue-smooth-scroll
Features
- fixed SSR
- fixed
durationproblem, now animation work good. - support scroll down and scroll up
- support specific scroll container
- Optimize code
Instalation
# install dependency
npm install --save vue2-smooth-scroll// import on your project (less then 1KB gziped)
import vueSmoothScroll from 'vue2-smooth-scroll'
Vue.use(vueSmoothScroll)Usage
<a href="#div-id" v-smooth-scroll>Anchor</a>
<div id="div-id"></div>Custom options
Defaults
{
duration: 500, // Animation speed
offset: 0, // Offset from element, you can use positive or negative values
container: '', // the scroll container, default is window,use document.querySelector to query the Element,
updateHistory: true //Push hash to history or not
}Example:
<div id="container">
<a href="#div-id" v-smooth-scroll="{ duration: 1000, offset: -50, container: '#container', updateHistory: false }">Anchor</a>
<div id="div-id"></div>
</div>Without Browserify or Webpack
<body>
<div id="app">
<a href="#bottom" v-smooth-scroll>click me will scroll to bottom!</a>
<div style="height: 2000px;"></div>
<span id="bottom">bottom</span>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue2-smooth-scroll"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent