How do I implement a scroll to an element in a Polymer 3 app-header=layout?

Question

I am trying to implement the hash scroll to in the following app page.

I am setting the id of the function-detail to the name of the function. When I add the hash to the URL of the function named, I do not get a scroll to in the contents of the app-header=layout. What am I missing?

  <iron-location id="sourceLocation" query="{{query}}" hash="{{hash}}"></iron-location>
  <iron-query-params id="sourceParams" params-string="{{query}}" params-object="{{params}}"></iron-query-params>
  <iron-ajax auto="true" 
    url="/v1/resources/xqdoc"  
    params="[[params]]"
    handle-as="json"
    last-response="{{result}}"></iron-ajax>
  <app-drawer-layout>
    <app-drawer slot="drawer">
      <app-toolbar>
        <div main-title>Modules</div>
      </app-toolbar>
    <section>
    <paper-listbox attr-for-selected="item-name" selected="{{selectedSuggestionId}}" fallback-selection="None">
      <h3>Libraries</h3>
      <template is="dom-repeat" items="[[result.modules.libraries]]">
        <paper-item item-name="[[item.uri]]">[[item.uri]]</paper-item>
      </template>
      <h3>Mains</h3>
      <template is="dom-repeat" items="[[result.modules.main]]">
        <paper-item item-name="[[item.uri]]">[[item.uri]]</paper-item>
      </template>
    </paper-listbox>
      <div style="margin-bottom:90px;width:100%;"></div>
    </section>
    </app-drawer>
    <app-header-layout>
      <app-header slot="header" reveals effects="waterfall">
      <app-toolbar>
        <paper-icon-button icon="menu" drawer-toggle></paper-icon-button>
        <div main-title>xqDoc</div>
        <paper-toggle-button checked="{{showHealth}}">Show Documentation Health</paper-toggle-button>
      </app-toolbar>
      </app-header>
    <section>
      <template is="dom-if" if="{{result.response.uri}}">
        <xqdoc-module show-health="[[showHealth]]" item="{{result.response}}"></xqdoc-module>
        <template is="dom-repeat" items="{{result.response.imports}}">
          <import-detail item="{{item}}"></import-detail>
        </template>
        <template is="dom-repeat" items="{{result.response.variables}}">
          <variable-detail show-health="[[showHealth]]" item="{{item}}" params="{{params}}" hash="{{hash}}"></variable-detail>
        </template>
        <template is="dom-repeat" items="{{result.response.functions}}">
          <function-detail id$="[[item.name]]" show-health="[[showHealth]]" item="{{item}}" params="{{params}}" hash="{{hash}}"></function-detail>
        </template>
      </template>
      <paper-card>Created by xqDoc version [[result.response.control.version]] on [[result.response.control.date]]</paper-card>
      <div style="margin-bottom:200px;height:150px;width:100%;"></div>
    </section>
    </app-header-layout>
  </app-drawer-layout>

Here is an image of the developer window.

Because the element you want to navigate is inside a `dom-repeat` inside a `dom-if`, it might not actually exist if you navigate directly to `url.com#id`. Also, make 100% sure the `id` is actually being defined correctly on the developer tools - might be something wrong with the way the variable is defined. — AmmoPT, Dec 19 '18 at 11:19
I added an image from the developer window showing the id getting properly in the element. The id does not show up on this.$.**. e.g. `this.$.functions` — Loren Cahlander, Dec 19 '18 at 11:40
Can it be that because the scroll to target is inside shadow DOM and the browser can't actually identify it? Check [this other thread](https://stackoverflow.com/questions/43425398/anchor-tag-a-id-jump-with-hash-inside-shadow-dom). — AmmoPT, Dec 19 '18 at 11:48
I'm glad, accept your own answer so the issue is marked as closed. Have a good one! — AmmoPT, Dec 19 '18 at 12:04

score 1 · Accepted Answer · answered Dec 19 '18 at 12:03

Thanks to AmmpPT, I found my answer:

I used this.shadowRoot.querySelector('#id') to get the element and then used scrollIntoView()

  static get properties() {
    return {
      result: { type: Object, notify: true },
      params: { type: Object, notify: true },
      hash: { type: String, notify: true, observer: '_hashChanged' },
      showHealth: { type: Boolean, notify: true, value: false },
      selectedSuggestionId: { type: String, notify: true, observer: '_moduleSelected' }
    };
  }

  _hashChanged(newValue, oldValue) {
    var a= '#' + newValue;
    var b = this.shadowRoot.querySelector(a);

    if (b) {
      b.scrollIntoView();
    }
  }

How do I implement a scroll to an element in a Polymer 3 app-header=layout?

1 Answers1