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

Overview

Vue2 Smooth Scroll

All Contributors

Vue 2.x npm npm-downloades license

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:

">
<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

    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

    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 <a> element

    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

    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

    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

    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

    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 <a href=">

    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

    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

    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.

    image

    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

    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 terser from 4.8.0 to 4.8.1

    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

    Dependabot compatibility score

    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

    build(deps): bump minimist from 1.2.5 to 1.2.6

    Bumps minimist from 1.2.5 to 1.2.6.

    Commits

    Dependabot compatibility score

    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
Owner
xlaoyu
未识乾坤大,但怜草木青
xlaoyu
Lightweight Vue plugin for smooth-scrolling.

Vue Smooth Scroll Lightweight Vue plugin for smooth-scrolling. For simple use-cases, the native scroll-behavior CSS property (working draft) may be en

xlaoyu 12 Jun 7, 2022
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

Mauricio Farias Dziedzinski 531 Sep 27, 2022
Lightweight package for highlighting menu items as you scroll the page, also scrolling to target section when item clicked. Use as a vue component/directive or in vanilla js.

navscroll-js Installation This package is available on npm. Using npm: npm install --save navscroll Using yarn: yarn add navscroll Directly include it

Honoré Nintunze 57 Mar 2, 2022
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

Mauricio Farias Dziedzinski 531 Sep 27, 2022
🍹 Next-gen compact native smooth scrolling components for Vue 3

?? Next-gen compact native smooth scrolling component library for Vue 3 ⚡ No scrollbar reinventing using DOM elements, no weird logic, only native scr

ZEOKKU 11 Oct 1, 2022
Starter template for parallax effects & smooth scrolling experience

Nuxt + Locomotive Scroll Starter template for parallax effects & smooth scrolling experience. Empower your Nuxt project in no time. See it in action →

Ivo Dolenc 36 Sep 27, 2022
A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

Pete Hegman 182 Oct 1, 2022
A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

Pete Hegman 181 Aug 30, 2022
A Vue directive to lock the body scroll without stopping the target element from scrolling

A Vue directive to lock the body from scrolling without stopping the target element from scrolling

Bram Honingh 30 Jul 10, 2022
Vue Scroll Detect - Detect component visibility change on scrolling

Vue Scroll Detect Detect component visibility change on scrolling. Installation yarn add vue-scroll-detect Example See examples/ at Code Sandbox Usage

Dzul Nizam 1 Jun 5, 2022
Component that customizes the scroll and inserts shadow when scrolling exists

Vue Scroll Shadow • • Component that customizes the scroll and inserts shadow when scrolling exists Installation NPM npm i vue-scroll-shadow # or yarn

André Lins 2 Feb 13, 2022
A vue directive to make a scrollable element scroll by draging to the scroll direction

vue-dragscroll vue-dragscroll is a micro vue.js directive which enables scrolling via holding the mouse button ("drag and drop" or "click and hold" st

null 223 Sep 9, 2022
Vue Scroll Show - Showing the element if the user reached it after scroll

Vue Scroll Show Showing the element if the user reached it after scroll Installation npm i --save-dev vue-scroll-show import VueScrollShow from 'vue-s

Aleksey Pleshkov 10 Jan 5, 2022
Vue plugin to disable scrolling page

Vue plugin to disable scrolling page

17axaH 0 May 12, 2021
A Vue plugin which supervises binding element's scrolling and trigger target elements class

A Vue plugin which supervises binding element's scrolling and trigger target elements class

null 0 Nov 27, 2020
A Vue plugin which supervises binding element's scrolling and trigger target elements class

vue-scroll-trigger A Vue plugin which supervises binding element's scrolling and trigger target elements class Sample BEHIVE-DESIGN Install with yarn

Ranlizzz 2 Nov 5, 2020
This plugin allows you to change css values by scrolling

scroll-parallax-effect スクロールによってcssの値を変更することができるプラグインです。 This plugin allows you to change css values by scrolling. このプラグインには3つの機能があります。 Timing : 指定 位置

kamem 0 Mar 19, 2022
(🗃️ Archived) Vue 2 directive for custom scrollbar that uses native scroll behavior. Lightweight, performant, customizable and without dependencies. Used successfully in production on https://ggather.com

??️ Archived & No Longer Maintained I've decided to archive this library because my priorities changed a bit and I no longer have enough resources (ti

null 655 Sep 22, 2022
Vue directive wrapper for smooth-scrollbar

smooth-vuebar Vue directive wrapper for smooth-scrollbar Demo You can refer to the wrapped library's demo. Why There are many other wrappers for this

Marco 'Gatto' Boffo 30 Sep 18, 2022