Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    anchor tags in <parallax-view>

    Help
    anchor parallax-view
    2
    4
    2777
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Martin
      Martin last edited by Martin

      Is it possible to use anchor tags in a parallax-view?
      Or should I set up vue-router in a particular way?

      (this is for a website btw)

      <a href="#about">About</a>
      Somewhere down the page...
      <span id="about">...</span>
      
      Martin 1 Reply Last reply Reply Quote 0
      • Martin
        Martin @Martin last edited by

        @Martin I think this probably answers all.

        https://github.com/vuejs/vue-router/blob/dev/examples/scroll-behavior/app.js

        Martin 1 Reply Last reply Reply Quote 0
        • Martin
          Martin @Martin last edited by

          @Martin
          Here are the steps to get it working… (only works for web sites)

          BTW: what is the best way to add smooth scrolling when jumping to an anchor tag. (css, js ?)

          1. change config/index.js (enable history mode)
            line 7: publicPath=’/’
            0_1478705018568_upload-4af19504-8e31-4ba3-83d7-c1606db86261

          2. slightly change the router.js into this…(basically only adding a scrollBehaviour function to router object

          import Vue from 'vue'
          import VueRouter from 'vue-router'
          
          Vue.use(VueRouter)
          
          /*
           Avoid lazy loading while in dev mode
           to benefit from HMR
           */
          function load (name) {
            if (process.env.NODE_ENV === 'development') {
              return require('components/' + name + '.vue')
            }
            else {
              return (resolve) => {
                require('bundle?lazy!components/' + name + '.vue')(resolve)
              }
            }
          }
          
          // scrollBehavior:
          // - only available in html5 history mode
          // - defaults to no scroll behavior
          // - return false to prevent scroll
          const scrollBehavior = (to, from, savedPosition) => {
            if (savedPosition) {
              // savedPosition is only available for popstate navigations.
              return savedPosition
            }
            else {
              const position = {}
              // new navigation.
              // scroll to anchor by returning the selector
              if (to.hash) {
                position.selector = to.hash
              }
              // check if any matched route config has meta that requires scrolling to top
              if (to.matched.some(m => m.meta.scrollToTop)) {
                // cords will be used if no selector is provided,
                // or if the selector didn't match any element.
                position.x = 0
                position.y = 0
              }
              // if the returned position is falsy or an empty object,
              // will retain current scroll position.
              return position
            }
          }
          
          const router = new VueRouter(
            {
              mode   : 'history',
              base   : __dirname,
              scrollBehavior,
              routes : [
                {
                  path : '/', component : load('index'), meta : {scrollToTop : true}
                }
              ]
            }
          )
          
          export default router
          
          1 Reply Last reply Reply Quote 0
          • rstoenescu
            rstoenescu Admin last edited by

            Some more things worth mentioning. I’ll just copy paste my comment on the latest Quasar starter kit / template:

            /*
               * NOTE! VueRouter "history" mode DOESN'T works for Cordova builds,
               * it is only to be used only for websites.
               *
               * If you decide to go with "history" mode, please also open /config/index.js
               * and set "build.publicPath" to something other than an empty string.
               * Example: '/' instead of current ''
               *
               * If switching back to default "hash" mode, don't forget to set the
               * build publicPath back to '' so Cordova builds work again.
               */
            

            Also, changing the “publicPath” should be carefully considered as it impacts the way you reference static assets.

            1 Reply Last reply Reply Quote 0
            • First post
              Last post