指向另一個元素的href在Polymer中不起作用

Question

我使用Polymer Starter Kit及其app-router創建了一個項目。

我的my-app.html具有類似視圖的選擇器。

<iron-pages role="main" selected="[[page]]" attr-for-selected="name">
      <my-view1 name="view1"></my-view1>
      <my-view2 name="view2"></my-view2>
      <my-view3 name="view3"></my-view3>
      <my-view4 name="view4"></my-view4>
      <my-view5 name="view5"></my-view5>
      <my-view6 name="view6"></my-view6>
    </iron-pages>

我有一個組件my-view1.html，其中有帶有href標簽的div

<div>God 1 <a href="#gotogod" class="link">Jump to example</a> </div>

我在文件的其他地方

<p id="gotogod">
  God is great
</p>

雖然我沒有收到任何錯誤，但是當我單擊鏈接時，它並沒有跳到該段落。 當我將鼠標懸停在鏈接上時，

http://localhost:8080/view1#gotogod

但是頁面並沒有跳到那個地方。

我嘗試了href的各種組合，但沒有運氣。

請幫忙。

Answer 1

HTML元素：

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

JavaScript函數：

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

Answer 2

好的，您需要對應用程序路由保持警惕，當您要更改路由時，應該通過應用程序路由進行更改。

我這樣做（有點）：

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

<iron-selector attr-for-selected="route"
               selected="[[ page ]]"
               role="navigation">
    <a route="editor" href="/editor">Editor</a>
    <a route="analyze" href="/analyze">Analyze</a>
    <a route="community" href="/community">Community</a>
</iron-selector>

<iron-pages role="main"
            attr-for-selected="route"
            selected="[[ page ]]">
    <my-editor route="editor"></my-editor>
    <my-analyze route="analyze"></my-analyze>
    <my-community route="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 Painted
             this.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 /analyze
             if(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>

在定義了路由的主頁上，可以使用帶路由的href進行導航，但是當您位於某些頁面元素中（而未定義應用程序路由）時，則應要求主頁面可使用功能_changeRoute而不使用href通過app-route更改路線，該調用如下：

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

這樣，您可以確保應用程序路由可以完成導航，並且每個頁面都可以正常工作，甚至可以設置驗證或參數以通過此函數傳遞。

Answer 3

看來，這個答案就是您想要的： Polymer滾動到特定的div

你可以做 ：

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

在Polymer元素的代碼中：

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