Lightweight Vue plugin for smooth-scrolling extended from vue-smooth-scroll

xlaoyu

Last update: Nov 28, 2022

Related tags

Overview

Vue2 Smooth Scroll

Lightweight Vue plugin for smooth-scrolling extended from vue-smooth-scroll.

For simple use-cases, the native scroll-behavior CSS property (working draft) may be enough.

This package compatible with Vue 2.x and Vue 1.x

New package for Vue 3.x use this package v-smooth-scroll

Features

Directive and programmatic API with global and local config overrides
SSR
Smooth, non-blocking animation using requestAnimationFrame (with fallback)
Y-axis or vertical scrolling
Specific scroll containers
1.3kB gzipped, 2.9kB min

Installation

npm install --save vue2-smooth-scroll

import VueSmoothScroll from 'vue2-smooth-scroll'
Vue.use(VueSmoothScroll)

Usage

Directive

Section 3

<a href="#sec-3" v-smooth-scroll>Section 3a>

<section id="sec-3">section>

Programmatic

const myEl = this.$refs.myEl || this.$el || document.getElementById(...)

this.$smoothScroll({
  scrollTo: myEl,
  hash: '#sampleHash'  // required if updateHistory is true
})

Direct in




">
<body>
  <div id="app">
    <a href="#bottom" v-smooth-scroll>Let's go to #bottom!a>
    <div style="height: 2000px;">div>
    <span id="bottom">bottomspan>
  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'
    })
  script>
body>



Custom options

Defaults

{
  duration: 500,       // animation duration in ms
  offset: 0,           // offset in px from scroll element, can be positive or negative
  container: '',       // selector string or Element for scroll container, default is window
  updateHistory: true  // whether to push hash to history
  easingFunction: null // gives the ability to provide a custom easing function `t => ...`
                       // (see https://gist.github.com/gre/1650294 for examples)
                       // if nothing is given, it will defaults to `easeInOutCubic`
}


Global

import VueSmoothScroll from 'vue2-smooth-scroll'

Vue.use(VueSmoothScroll, {
  duration: 400,
  updateHistory: false,
})


Directive:

Anchor

">
<div id="container">
  <a href="#div-id" v-smooth-scroll="{ duration: 1000, offset: -50, container: '#container' }">Anchora>

  <div id="div-id">div>
div>



Programmatic

this.$smoothScroll({
  scrollTo: this.$refs.myEl,
  duration: 1000,
  offset: -50,
})


License
MIT

Contributors 
✨

Thanks goes to these wonderful people (emoji key):




_James


💻


_a-kriya


💻
 

🐛
 

📖




This project follows the all-contributors specification. Contributions of any kind welcome!






Comments













feat: export smoothScroll() method so it can be used programatically




I really like the smooth scroll implementation in this library, but it couldn't be used programatically so i've pulled the scrolling method out of the install and exported it.
This is a first cut and fully understand if you want to make tweaks. One thing I wasn't sure about was whether to export the method or to attach it to the Vue.prototype so we could do something like this.$smoothScroll(...) inside a component. I've gone with exporting it, so it could be used like import { smoothScroll } from 'vue2-smooth-scroll' but happy to discuss as I generally prefer extending Vue.prototype.
I also haven't done any Vue SSR before, but can see there's code in here to handle that, so it will need checking to see if I haven't broken SSR support.
Let me know what you think.
enhancement 



opened by jwhitmarsh  10














Running the app on IE11 causes error: Expected Identifier




First of all, thanks for making this awesome package!
I found a bug when updating to version 1.5.0 causes the following console error in IE11: Expected Identifier in the chunk-vendors.js
Not much else is being shown



opened by djurdjen  5














Error when using v-smooth-scroll on other component instead of  element




I am trying to use smooth scroll on an other element than <a>, instead i want to use
<b-nav-item href="#">Link</b-nav-item> from bootstrap-vue Navbar component :
<b-nav-item
    href="#content-1"
    v-smooth-scroll
    class="text-uppercase"
>

But i get the following error in Browser Console:
vue-smooth-scroll.min.js?5a58:formatted:110 Uncaught TypeError: Cannot read property 'substring' of undefined at HTMLLIElement.eval (vue-smooth-scroll.min.js?5a58:formatted:110)
If I am using smooth scroll on a regular <a>element like this:
<a
    href="#content-1"
    v-smooth-scroll
 >Test</a>

it´s working fine.
bug 



opened by makkus183  5














Request: need to add callback function




Case:
I have a sticky navbar and the height is different from mobile and desktop, so I have to change the offset from mobile and desktop to not cover the content. i want an function to be call returning an object.



opened by snowman  5














Directive Error Without Webpack or Browserify




Browser Log
vue.js:634 [Vue warn]: Failed to resolve directive: smooth-scroll

(found in <Anonymous>)

Index.html
  ...
  <script src="{% static 'vue/dist/vue.js' %}" charset="utf-8"></script>
  <script src="{% static 'vue-smooth-scroll/dist/vue-smooth-scroll.min.js' %}" charset="utf-8"></script>
  <script src="{% static 'js/base.js' %}" charset="utf-8"></script>
  ...


base.js
  ...
  Vue.use(VueSmoothScroll)

  new Vue ({
    el: '#app'
  })





opened by MauroNavaLuevanos  5














feat: add config option to enable/disable updating window.history




Firstly, thanks for this plugin, it's very helpful.
This PR is a first cut at solving the requirement in #3 and #7. It's backwards compatible, and defaults to your desired behaviour @Yuliang-Lee, but enables the user to prevent window.history being updated if required.
The change means that you can set a global config option like:
Vue.use(vueSmoothScroll, { updateHistory: false });

Or you can do it on a per-usage basis:
<div id="container">
  <a href="#div-id" v-smooth-scroll="{ updateHistory: false }">Anchor</a>
  <div id="div-id"></div>
</div>

You can also set a global and then override the global in the per-usage config.
Let me know what you think!



opened by jwhitmarsh  4














Passing arguments does nothing




Hi,
I tried using the config but nothing changes with passing any config.
I tried this:
<a v-smooth-scroll="{ duration: 3000, offset: -50, container: '#container', updateHistory: false }" href="#id"></a>

note the 3000 duration, but it takes equally long as if I wasn't passing anything. I also tried passing a data variable with this object. I tried different durations, changing offset, giving the container the id "container" but nothing seem to work. Also only passing one attribute does not do anything.
This is the way I import it in my vue component:
import vueSmoothScroll from 'vue2-smooth-scroll'
import Vue from 'vue'
Vue.use(vueSmoothScroll);




opened by pieterjandebruyne  3








">





how to use with 




Sorry, this is probably my limited understanding of javascript. I have a site that is mostly just a single page and my header nav links to various anchors on the home page. However, I have a couple of exceptions: blog, for instance. So, all of my links are preceded by a slash to bring users back to the home page anchors.
In std html, this works fine:
<a href="/#foo">Foo</a>
With v-smooth-scroll, #foo works, /#foo does not. Obviously, I need the / if I'm coming from any other page than index.
Any ideas what I'm doing wrong?
Actual code (pug):
a(href="/#contact" v-smooth-scroll) contact



opened by wanderingcrow  3














It is not working with v-if




Hi I have a use case like described below:
On a drawer user clicks a link. Page smoothly moves to the section and drawer closes after the click.
To close the drawer (which is another animation) I use v-if. If the drawer is not active I just don't show it. However it is not working with this scenario. Is it a bug or or a missing feature?
<transition name="drawer-animation">
    <nav v-if="isDrawerActive" class="drawer-menu">
        <h1>Test</h1>
        <ul>
            <li><a href="#section-a" @click="toggleDrawer" v-smooth-scroll="{ updateHistory: false }">LinkA</a></li>
            <li><a href="#section-b" @click="toggleDrawer" v-smooth-scroll="{ updateHistory: false }">LinkB</a></li>
            <li><a href="#section-c" @click="toggleDrawer" v-smooth-scroll="{ updateHistory: false }">LinkC</a></li>
            <li><a href="#section-d" @click="toggleDrawer" v-smooth-scroll="{ updateHistory: false }">LinkD</a></li>
        </ul>
    </nav>
</transition>




opened by MansurAliKoroglu  3














Prevent hash in URL




Hi,
Your component works perfectly, but I'm annoyed by the hash in the URL, I just want the smooth scroll to happen.

Would you consider an option to scroll without adding the hash?
I guess the the only thing to do would be to add the following line when that option is activated:
history.pushState('', document.title, window.location.pathname);

Thanks a lot 👍



opened by bokub  3














Running in Vue 3.0




Hi there,
Anyone got this working in Vue 3.0?
I'm not sure how to do the importing etc. I tried doing it the same as in Vue 2.0 (like in the example), but that doesn't work.



opened by larsvdd  2














build(deps): bump decode-uri-component from 0.2.0 to 0.2.2




Bumps decode-uri-component from 0.2.0 to 0.2.2.

Release notes
Sourced from decode-uri-component's releases.

v0.2.2

Prevent overwriting previously decoded tokens 980e0bf

https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.1...v0.2.2
v0.2.1

Switch to GitHub workflows 76abc93
Fix issue where decode throws - fixes #6 746ca5d
Update license (#1) 486d7e2
Tidelift tasks a650457
Meta tweaks 66e1c28

https://github.com/SamVerschueren/decode-uri-component/compare/v0.2.0...v0.2.1



Commits

a0eea46 0.2.2
980e0bf Prevent overwriting previously decoded tokens
3c8a373 0.2.1
76abc93 Switch to GitHub workflows
746ca5d Fix issue where decode throws - fixes #6
486d7e2 Update license (#1)
a650457 Tidelift tasks
66e1c28 Meta tweaks
See full diff in compare view





Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


Dependabot commands and options


You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR
@dependabot recreate will recreate this PR, overwriting any edits that have been made to it
@dependabot merge will merge this PR after your CI passes on it
@dependabot squash and merge will squash and merge this PR after your CI passes on it
@dependabot cancel merge will cancel a previously requested merge and block automerging
@dependabot reopen will reopen this PR if it is closed
@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
@dependabot use these labels will set the current labels as the default for future PRs for this repo and language
@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies 



opened by dependabot[bot]  0














build(deps): bump loader-utils from 1.4.0 to 1.4.2




Bumps loader-utils from 1.4.0 to 1.4.2.

Release notes
Sourced from loader-utils's releases.

v1.4.2
1.4.2 (2022-11-11)
Bug Fixes

ReDoS problem (#226) (17cbf8f)

v1.4.1
1.4.1 (2022-11-07)
Bug Fixes

security problem (#220) (4504e34)




Changelog
Sourced from loader-utils's changelog.

1.4.2 (2022-11-11)
Bug Fixes

ReDoS problem (#226) (17cbf8f)

1.4.1 (2022-11-07)
Bug Fixes

security problem (#220) (4504e34)





Commits

331ad50 chore(release): 1.4.2
17cbf8f fix: ReDoS problem (#226)
8f082b3 chore(release): 1.4.1
4504e34 fix: security problem (#220)
See full diff in compare view





Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


Dependabot commands and options


You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR
@dependabot recreate will recreate this PR, overwriting any edits that have been made to it
@dependabot merge will merge this PR after your CI passes on it
@dependabot squash and merge will squash and merge this PR after your CI passes on it
@dependabot cancel merge will cancel a previously requested merge and block automerging
@dependabot reopen will reopen this PR if it is closed
@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
@dependabot use these labels will set the current labels as the default for future PRs for this repo and language
@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies 



opened by dependabot[bot]  0














build(deps): bump terser from 4.8.0 to 4.8.1




Bumps terser from 4.8.0 to 4.8.1.

Changelog
Sourced from terser's changelog.

v4.8.1 (backport)

Security fix for RegExps that should not be evaluated (regexp DDOS)




Commits

See full diff in compare view





Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


Dependabot commands and options


You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR
@dependabot recreate will recreate this PR, overwriting any edits that have been made to it
@dependabot merge will merge this PR after your CI passes on it
@dependabot squash and merge will squash and merge this PR after your CI passes on it
@dependabot cancel merge will cancel a previously requested merge and block automerging
@dependabot reopen will reopen this PR if it is closed
@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
@dependabot use these labels will set the current labels as the default for future PRs for this repo and language
@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies 



opened by dependabot[bot]  0














build(deps): bump minimist from 1.2.5 to 1.2.6




Bumps minimist from 1.2.5 to 1.2.6.

Commits

7efb22a 1.2.6
ef88b93 security notice for additional prototype pollution issue
c2b9819 isConstructorOrProto adapted from PR
bc8ecee test from prototype pollution PR
See full diff in compare view





Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


Dependabot commands and options


You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR
@dependabot recreate will recreate this PR, overwriting any edits that have been made to it
@dependabot merge will merge this PR after your CI passes on it
@dependabot squash and merge will squash and merge this PR after your CI passes on it
@dependabot cancel merge will cancel a previously requested merge and block automerging
@dependabot reopen will reopen this PR if it is closed
@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
@dependabot use these labels will set the current labels as the default for future PRs for this repo and language
@dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
@dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
@dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

dependencies 



opened by dependabot[bot]  0