How can I use this in a component without registering it in Vue Vue.use(VueSmoothScroll, { duration: 400, updateHistory: false, })

?

Hi!
On the last published version on npm (1.5.0), the main entry from package.json points to src/index.js instead of dist/vue-smooth-scroll.min.js. So it breaks on nodejs as it's not compiled to UMD.

I see on github it points to the right file so I guess it's a mistake when the version has been deployed? :)

(Check here: https://unpkg.com/[email protected]/package.json)

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

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 👍

install method of the plugin is called during SSR, and with v1.4.0 it contains the following declaration that results in a window not defined error:

const defaultValue = {
  duration: 500,
  offset: 0,
  container: window,
  updateHistory: true,
};

@Yuliang-Lee @jwhitmarsh Sorry for missing that in the review! I'll try to come up with a good way to fix and create a PR, but I'm open to suggestions.

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.

The codes are working but the problem is, when I have the href like <a href="/#anchor">Anchor</a>, it does not seem to work with my codes. If I have the same without the forward slash, it works like <a href="#anchor">Anchor</a>.
When visit new route (/contact-us) - it loaded as base_url/contact-us#anchor and never works because the #anchor section inside home page.

I am using vue-router.

Any help will be appreciated.

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

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>

In my component, I have the following code:

<a href="#test" class="mouse-icon" @click.prevent="preventDefault" v-smooth-scroll>

I was able to scroll to the element, with an id of #test as shown in the following code

<div id="test"></div>

However, I notice that the id "test" will be appended at the end of the URL. how do you stop that from happening? For example,

http://localhost:8081/#/test

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);

I want to perform some other functionality in javascript in addition to scrolling to the anchor, does this library support that?

When using with Gridsome works perfectly on develop, but when I use "gridsome build" it throws an error.

你好Yuliang，感谢开发vue2-smooth-scroll，我制作开源语言学习网站的时候用它实现字幕自动滚动效果：https://www.zerotohero.ca/zh/en/youtube/view/Sk8TQeqqz0U

因为我设置的字幕smooth-scroll的duration比较长（约3000ms），有时用户会试图手动滚动字幕。可不可以在用户滚动字幕的时候自动中断smooth-scroll?

谢谢

Tooling:
Vue.js & Gridsome
Chakra UI Vue
Netlify
Mac OS Catalina 10.15.7
Webstorm 2021.2.2
Firefox 92

When using vue2-smooth-scroll locallty I have no issues, it is not until I go to deploy my site with Netlify do I get the following TypeError during the Netlify build step (gridsome build).

TypeError: Cannot read properties of null (reading 'Vue')
8:53:24 PM: at Module. (node_modules/vue2-smooth-scroll/dist/vue-smooth-scroll.min.js:1:3059)
8:53:24 PM: at n (node_modules/vue2-smooth-scroll/dist/vue-smooth-scroll.min.js:1:331)
8:53:24 PM: at module.exports.WliE (node_modules/vue2-smooth-scroll/dist/vue-smooth-scroll.min.js:1:1134)
8:53:24 PM: at assets/js/app.38fc5f3e.js:6567:992
8:53:24 PM: at assets/js/app.38fc5f3e.js:6567:37
8:53:24 PM: at Object.WliE (node_modules/vue2-smooth-scroll/dist/vue-smooth-scroll.min.js:1:210)
8:53:24 PM: at webpack_require (webpack/bootstrap:25:0)
8:53:24 PM: at Module.O/VM (assets/js/app.38fc5f3e.js:4514:29)
8:53:24 PM: at webpack_require (webpack/bootstrap:25:0)
8:53:24 PM: at Object.0 (assets/js/app.38fc5f3e.js:277:18)

I am using vue2-smooth-scroll globally in my main.js file as shown below:

Vue.use(VueSmoothScroll, { duration: 1100 });

Any help would be greatly appreciated.

i am getting an error in the console when loading in IE 11:

[Vue warn]: Error in directive smooth-scroll inserted hook: "TypeError: Object doesn't support property or method 'assign'"
found in
---> <NavBar> at src\components\NavBar.vue

below this is the object Error. i do not get this error on Firefox or Chrome. i am using the meta tag <meta http-equiv="X-UA-Compatible" content="IE=edge" /> and a proper doctype. i do not have any other console errors.

let me know if you need more details - i am not sure how to create a jsfiddle for Vue using a package.

Edit: is native smooth scrolling supported by feature detection?

In my app, I'm scrolling through a container, and when I set the css property for it to "scroll behavior: smooth" - it breaks on the desktop computer. After clicking on the anchor, it thinks for a long time, and then teleports to about the anchor + - 10% of the height.

I think you should mention this in the description, I had to spend some time to understand why the library is not working correctly in my application

After including the import the following error occurs how can I remove this error?

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.

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'
  })

One of the nicer smooth scrolls for vuejs - a nice feature would be to set and detect the active class for the menu/link. An example: https://ibufu.github.io/vue2-scrollspy/

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.