href to another element does not work in Polymer - html

Question

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..
<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>
I have a component my-view1.html, within which I have div with href tag
<div>God 1 Jump to example </div>
elsewhere in the document I have
<p id="gotogod">
God is great
</p>
While I dont get any errors, it doesnt jump to the paragraph when I click the link. When I hover over the link, I do get
http://localhost:8080/view1#gotogod
But the page doesnt jump to that spot.
I have tried various combinations for the href without luck.
Please help.

Answer 1

HTML Element:
<a on-click="scrollIntoView" section-id="gotogod">
Javascript Function:
scrollIntoView(e) {
let sectionId = e.target.getAttribute('section-id');
this.$[sectionId].scrollIntoView();
}

Answer 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-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>
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.

Answer 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();
}