Polymer href link anchor does not scroll to div when using <iron-pages>

Question

I'm using Polymer 1.x, and I have an <iron-selector> with generated links. I would like for one of my links to scroll to a <div> . However, I cannot achieve this successfully as the link is intercepted by the <iron-pages> . Here is what I have tried so far:

<app-location route="{{route}}"></app-location>
<app-route
    route="{{route}}"
    pattern="/:page"
    data="{{routeData}}"
    tail="{{subroute}}"></app-route>

<iron-selector role="navigation" class="drawer-list" selected="[[categoryName]]" attr-for-selected="name">
    <template is="dom-repeat" items="[[categories]]" as="category" initial-count="4">
        <a name="[[category.name]]" href="[[category.link]]">[[category.title]]</a>
    </template>
</iron-selector>

<section id="contactSection" class="home-contact ss-style-triangles">
    <div class="container">
        <div class="contact-wrap">
            <h1>Contact</h1>
        </div>
    </div>
</section>

<iron-pages role="main" selected="[[page]]" attr-for-selected="name" selected-attribute="visible" fallback-selection="404">
  <!-- home view -->
    <cass-home name="home"></cass-home>
    <cass-why name="whyChooseUs" route="{{subroute}}"></cass-why>
    <cass-partner name="partner" route="{{subroute}}"></cass-partner>
    <cass-404-warning name="404"></cass-404-warning>
</iron-pages>

Then in JavaScript:

var categoryList = [
    {
        name: 'home',
        title: 'Accueil',
        link: '/home',
    },
    {
        name: 'home',
        title: 'Home',
        link: '/home',
    },
    {
        name: 'b2b',
        title: 'Company',
        link: '/b2b',
    },
    {
        name: 'login',
        title: 'Connection',
        link:'/login'
    },
    {
        name: 'contact',
        title: 'Contact',
        link:'javascript:document.querySelector("#contactSection").scrollIntoView();'
    }
  ];

The is linked to an to set the core part of my

However, as it is in the local DOM, it's not detecting the #contactSection . I also tried using a function and registering a listener, but unsuccessfully.

Any hints?

Answer 1

You can workaround that problem by imperatively scrolling the <div> into view with a listener on the anchor's tap event:

<a href="#aboutSection" on-tap="_onTapAnchor">About</a>
<a href="#contactSection" on-tap="_onTapAnchor">Contact</a>

// <script>
_onTapAnchor: function(e) {
  e.preventDefault();
  var anchor = e.target.attributes.href.value;
  this.$$(anchor).scrollIntoView();
}

Notes:

• e.target is the <a> tag, which has an attributes map, containing the raw value of href ( #contactSection as opposed to http://localhost:8080/#contactSection ).
• We take e.target.attributes.href.value (eg, #contactSection ) and query the local DOM for it with this.$$(...) -- shorthand for Polymer.dom(this.root).querySelector(...) .
• We then take the result of the previous call (which is a <div> ), and call scrollIntoView() on it, which brings the <div> into the viewport.