Scroll smoothly when jumping to different sections on a page.
Apply the v-vk-scroll directive to any anchor element that contains a URL fragment to add the smooth scrolling behavior.
<a href="#my-id" v-vk-scroll></a>If you apply v-vk-scroll to an element other that anchor it will target all the child anchors and apply the scrolling individually. You can change the match criteria with the target option.
<p v-vk-scroll="'SELECTOR'">
<a href></a>
<a href></a>
</p>Note target is the primary option and its key may be omitted if it's the only option in the directive value.
To receive a callback when scrolling has completed, you can listen to the afterScroll event on the element that triggered the scrolling. As well as listen to beforeScroll to do some action or prevent scrolling by returning false.
<a href="#my-id" v-vk-scroll @beforeScroll @afterScroll></a>| Name | Type | Default | Description |
|---|---|---|---|
target | String | a | Selector that will be used to match child anchors. |
duration | Number | 1000 | Animation duration in milliseconds. |
offset | Number | 0 | Pixel offset added to scroll top. |
force | Boolean | false | Forces the scrolling even if link default action has been prevented. |
Note You can learn about directives and how to apply options at the Directives guide.
The following events will be triggered on elements with this directive attached:
| Name | Description |
|---|---|
beforeScroll | Fires before scroll begins. Can prevent scrolling by returning false. |
afterScroll | Fires after scrolling is finished. |