anchor links in chrome

[Atomiko Lex]

Hi there, still trying to set up a simple page...

Now I am having trouble getting anchor links to work inside a core-item element:

<core-item id="core_item1" icon="flag" label="Aktuelles" horizontal center layout>

                    <paper-ripple fit></paper-ripple><a href="#p1" target="_self"></a></core-item>

And the corresponding link target is:

<h2 id="p1">Aktuelles</h2>

Am I doing something really stupid, again?

Lex

[Elliott Sprehn]

Scrolling the page by fragment doesn't work in Shadow DOM, you'll need to scroll using script instead if you want to do this.

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/3c8281b2-d9a8-4e45-b8fd-9615d4514b2f%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Atomiko Lex]

Ok, thank you for your help, I was going crazy already... I guess it's just no single page site then, no problem.

Maybe someone could add that info over here?

Lex

[Atomiko Lex]

I guess this is a problem still, as menus without hash links won't work for smaller pages where the links you are following lead to just a couple of lines of content. Most users will bounce as they won't click such links. 

Should I file an issue for this anywhere, or is there one already, maybe? 

Also, would you have any ideas for putting together a script as workaround? Would I use the jQuery .scrollTop() method and set a vertical pixel target for all paragraphs linked to from my menu, instead of using fragment identifiers? But then, wouldn't I have to calculate the viewports of the users before, and then deliver different values for the scroll bar position for each user?

Sorry for putting up so many questions, I am no coder... 

Lex

[Atomiko Lex]

Maybe there is a hint out there already. This user over at stackoverflow suggests a workaround with 

scrollIntoViewFunc(document.querySelector("html /deep/ #someid"))... Trying to digg a little further, Lex

[Atomiko Lex]

So now I followed the tip and rewrote the hash link to:

<core-item id="core_item" label="Topic" horizontal center layout>

<a href="javascript:document.querySelector('html /deep/ #p1').scrollIntoView()"></a></core-item>, and that does the trick. 

Of course it would be nicer to use some sort of smooth scroll animation, but if I understand correctly that wouldn't work with shadow dom.

Lex

Am Mittwoch, 10. September 2014 11:18:08 UTC+2 schrieb

 Atomiko Lex:

[Eric Bidelman]

Smooth scrolling is coming natively to the DOM scroll methods:

http://src.chromium.org/viewvc/blink?view=revision&revision=178755

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/54046a3c-5835-49b5-9f3f-f86fa002e6d4%40googlegroups.com.

[Takayoshi Kochi]

FYI, the spec bug is filed at https://www.w3.org/Bugs/Public/show_bug.cgi?id=23161 for navigating hash under shadow roots.

To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/CACGqRCCr4UgFr2R1tEDstxOYS%2BFPpFjkW1NvNHwp1WUV%3D%2BcRVA%40mail.gmail.com.

For more options, visit https://groups.google.com/d/optout.

--
Takayoshi Kochi

[Atomiko Lex]

That's great news, thanks for sharing!

Lex

[Atomiko Lex]

Ok, this is not really working yet, I'm afraid.

So, scrollIntoView() isn't working precisely, as it is always scrolling about 50px or so below the targeted position, maybe resulting from the core-toolbar height. So what I did now to offset this, was to not point the menu links in my drawer navigation to the corresponding content paragraphs, but rather to top-links, that I have at the bottom of each previous paragraphs in the content area to give users a way to get to the top of the page quickly, by giving them additional id's.

So a menu link in my drawer navigation now looks like this:

<core-item id="core_item2" label="Topic2" horizontal center layout>

                  <a href="javascript:document.querySelector('html /deep/ #end_p1').scrollIntoView()"><paper-ripple fit></paper-ripple></a></core-item>

(#end_p1 is not my id for the start of the second paragraph, but for the link at the bottom of the first)

This kinda works.

The problem is that this workaround for the offset works for all links except the first one, as there is of course no paragraph above the first paragaph, to place a link into. Accordingly, all "go-to-the-top"-links in my menu don't work either, as they only get the user 50px below the top. 

So what I tried was to use the scroller property of the core-header-panel, mentioned in other postings here, like this: 

<a href="javascript:document.querySelector('html /deep/ #core_scroll_header_panel').scroller.scrollTop = 0;" id="end_p1">go to top</a> ,     

to let the user get to the top of the page.

That kinda works as well in Chrome, but clicking this link in Firefox only gives me a blank page with a zero.

This may be just a JavaScript problem, but hopefully many of you have run into this with Polymer before and would help me out?

Lex

[Frankie Fu]

<core-item id="core_item2" label="Topic2" horizontal center layout>

                  <a href="javascript:document.querySelector('html /deep/ #end_p1').scrollIntoView()"><paper-ripple fit></paper-ripple></a></core-item>

<a href="javascript:document.querySelector('html /deep/ #core_scroll_header_panel').scroller.scrollTop = 0;" id="end_p1">go to top</a> ,     

I would suggest not to put javascript on href, instead I think for your use case you can simply do something like this:

<paper-item label="Topic 1" on-tap="{{scrollToTop}}"></paper-item>

scrollToTop: function() {
  this.$.core_scroll_header_panel.scroller.scrollTop = 0;
},

Here is a jsbin I modified from your sample code in another thread.

http://jsbin.com/xuwogawapomi/1/edit

[Atomiko Lex]

This works just perfectly, fantastic! Thank you for all your terrific help!

Now I just have to understand how you constructed scrollToTop. I just got a copy of Cody Lindley's DOM Enlightenment, hope that and the API developer guide will get me going. 

[aleem....@gmail.com]

Is the suggested way to have links to anchor tags still using javascript or have there been some developments with polymer/shadow dom that address this? Could find anything googling, currently doing:

<core-item id="core_item" label="Topic" horizontal center layout>

<a href="javascript:document.querySelector('html /deep/ #p1').scrollIntoView()"></a></core-item>,

as mentioned above