How to use vue-scrollto - 10 common examples

// Run custom submit callback if no error in validation
      if (this.$refs.vfg.errors.length === 0) {
        RplFormEventBus.$emit('loading', true)
        await this.submitHandler()
        if (this.scrollToMessage) {
          VueScrollTo.scrollTo(this.$el, 500, { offset: -150 })
        }
        if (this.clearFormOnSuccess) {
          this.clearForm()
        }
      } else {
        // scroll into view first element with error
        const firstError = this.$refs.vfg.$children.find(child => child.field.model === this.$refs.vfg.errors[0].field.model)
        if (firstError) {
          VueScrollTo.scrollTo(firstError.$el, 500, { offset: -100 })
        }
      }
      RplFormEventBus.$emit('loading', false)
    }
  }

jumpToSeason(season) {
            // Don't jump until an option is selected
            if (season !== 'jump') {
                // Calculate duration
                let duration = (this.seasons.length - season) * 50;
                duration = Math.max(500, Math.min(duration, 2000)); // Limit to (500ms <= duration <= 2000ms)

                // Calculate offset
                let offset = -50; // Navbar
                // Needs extra offset when the sub menu is "fixed".
                offset -= window.matchMedia('(min-width: 1281px)').matches ? 40 : 0;

                const name = `season-${season}`;
                console.debug(`Jumping to #${name} (${duration}ms)`);

                scrollTo(`[name="${name}"]`, duration, {
                    container: 'body',
                    easing: 'ease-in-out',
                    offset
                });

                // Update URL hash
                window.location.hash = name;

                // Reset jump
                this.jumpToSeason = 'jump';
            }
        }
    }

scrollToCurrentTreeNode() {
            let node = this.$el.querySelector('.el-tree-node.is-current');
            if (node) {
                let nodeRect = node.getBoundingClientRect();
                let rootRect = this.$el.getBoundingClientRect();
                if (nodeRect.top > rootRect.bottom || nodeRect.bottom < rootRect.top) {   // Not visible
                    VueScrollTo.scrollTo(node, 500, {
                        offset: -20,
                        easing: 'ease-in-out',
                        container: this.$el
                    });
                }
            }
        },

this.$data.packageInfo = JSON.parse(content);
        let packageName = this.$data.packageInfo.name;
        if (this.$page.frontmatter.packageNames.includes(packageName))
          throw new Error(`Package ${packageName} already exists`);
        if (packageName.includes("@"))
          throw new Error(
            `Package name "${packageName}" includes character '@', that is not accepted by UPM. Please contact package owner to modify it.`
          );
        this.step = SubmitStep.GetYamlFile.value;
        // Guess license id.
        this.guessLicenseId();
        // Generate YAML.
        this.$data.yaml = this.genYaml();
        this.$data.yamlFilename = this.$data.packageInfo.name + ".yml";
      } catch (error) {
        VueScrollTo.scrollTo("#packageFolder", 500, { offset: -80 });
        if (error.message.includes("404"))
          this.$data.form.packageFolder.error = "package.json not found";
        else this.$data.form.packageFolder.error = error.message;
      } finally {
        this.$data.isSubmitting = false;
      }
    }
  }

import Vue from "vue";
import * as VueScrollTo from "vue-scrollto";

Vue.use(VueScrollTo);
Vue.use(VueScrollTo, {offset: -100});

VueScrollTo.setDefaults({offset: -100});

class Test extends Vue {
    mounted() {
        this.$scrollTo(this.$el, {offset: -100});
        this.$scrollTo("#id");
        VueScrollTo.scrollTo("#id", {offset: -100});
    }
}

scrollToNewItem (element) {
        const el = document.getElementById(element.id);
        if (el) {
          var options = {
            container: '.items-container',
            easing: 'ease-in',
            offset: -60,
            force: true,
            cancelable: true,
            x: false,
            y: true
          };
          VueScrollTo.scrollTo(el, 500, options);
          el.classList.add('newlyAddedItem');
          setTimeout(() => {
            el.classList.remove('newlyAddedItem');
          }, 2000);
        }
      },
      boardItemsRearanged ({moved}) {

run_next_or_previous(f) {
            f();
            VueScrollTo.scrollTo('#deposit-stepper', 500);
            const content = this.fcontent(this.state.sinks.creations.publication);
            BrowserUtils.localSet('saved_deposit', content);
        },
        update_step(info) {

setTimeout(() => {
        VueScrollTo.scrollTo(to.hash, 200)
      }, 1000)
      position.selector = to.hash

scrollToActiveRow () {
        const el = document.querySelector('.emoji-icon.active');
        if (el) {
          var options = {
            container: '.emoji-simplebar-container .simplebar-content',
            easing: 'linear',
            offset: -60,
            force: true,
            cancelable: true,
            x: false,
            y: true
          };
          VueScrollTo.scrollTo(el, 10, options);
        }
      },
      addEmoji ({emoji, emojiName}) {

vm.$nextTick(() => {
            const firstErrorElem = Array.prototype.slice.call(vm.$el.querySelectorAll('.invalid-feedback')).find(elem => elem.style.display !== 'none');
            if (firstErrorElem) {
              VueScrollTo.scrollTo(firstErrorElem, {
                container: config.container,
                duration: config.duration,
                offset: config.offset
              });
            }
          })
        }