Href To Another Element Does Not Work In Polymer

I created a project using the Polymer Starter Kit, with its app-router. My my-app.html has the selectors for the views like so..

Solution 1:

HTML Element:

<a on-click="scrollIntoView" section-id="gotogod">

Javascript Function:

scrollIntoView(e) {
   let sectionId = e.target.getAttribute('section-id');
   this.$[sectionId].scrollIntoView();
}

Solution 2:

Ok, you need to be alert about the app-route, when you're going to change the route, you should change it by the app-route.

I do it (kind of) this way:

<app-locationroute="{{ route }}"></app-location><app-routeroute="{{ route }}"pattern="/:page"data="{{ routeData }}"tail="{{ subroute }}"></app-route><iron-selectorattr-for-selected="route"selected="[[ page ]]"role="navigation"><aroute="editor"href="/editor">Editor</a><aroute="analyze"href="/analyze">Analyze</a><aroute="community"href="/community">Community</a></iron-selector><iron-pagesrole="main"attr-for-selected="route"selected="[[ page ]]"><my-editorroute="editor"></my-editor><my-analyzeroute="analyze"></my-analyze><my-communityroute="community"></my-community></iron-pages><script>Polymer({ 
         is:'my-element',
         properties: {
             page: {
                 type: String,
                 notify: true,
                 reflectToAttribute: true,
                 observer: "_pageChanged"
             }
         },

         observers: [
             "_routePageChanged(routeData.page)"
         ],

         listeners: {
             "requestChangeRoute": "_changeRoute"
         },

         attached: function(e) {
             // Lazyload the views as soon as the AppShell has been Paintedthis.importHref(
                 this.resolveUrl("my-editor.html"), null, null, true);
             this.importHref(
                 this.resolveUrl("my-analyze"), null, null, true);
             this.importHref(
                 this.resolveUrl("my-community"), null, null, true);

             // If the application is reloaded, redirect to /analyzeif(this.page != "analyze"){
                 this.set("route.path", "/analyze");
             }
         },

         _changeRoute: function(e) {
             this.set("route.path", e.detail.requestRoute);
         },

         _routePageChanged: function(page) {
             this.page = page || "analyze";
         }
     })
</script>

On the main page, where the route is defined, you can use the href with route to navigate, but when you're inside some of your page elements, where there isn't the app-route defined, you should ask for you main page to change the route by the app-route using the function _changeRoute without href, this call is made like this:

this.fire("requestChangeRoute", {
    route: "/editor"
});

This way you have sure that the app-route is taking care of the navigation and that every page is going to work, and you can even set validations or parameters to be passed by this function.

Solution 3:

It seems that this answer is what you look for : Polymer scroll to a specific div

You can do :

<a href="#gotogod"class="link"on-click="_goToGoScroll">

And in the code of the Polymer element :

_goToGoScrool() {
  this.$.gotogod.scrollIntoView();
}

Share