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
Am Donnerstag, 11. September 2014 09:50:57 UTC+2 schrieb Atomiko Lex:
>
> That's great news, thanks for sharing!
> Lex
>
> Am Donnerstag, 11. September 2014 07:37:34 UTC+2 schrieb 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.
>>
>> On Thu, Sep 11, 2014 at 3:50 AM, Eric Bidelman <[email protected]> wrote:
>>
>>> Smooth scrolling is coming natively to the DOM scroll methods:
>>> http://src.chromium.org/viewvc/blink?view=revision&revision=178755
>>>
>>> On Wed, Sep 10, 2014 at 9:19 AM, Atomiko Lex <[email protected]> wrote:
>>>
>>>> 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:
>>>>
>>>>> Maybe there is a hint
>>>>> <http://stackoverflow.com/questions/25689640/create-anchor-element-in-polymer>
>>>>> 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
>>>>>
>>>>>
>>>>>
>>>>> Am Mittwoch, 10. September 2014 10:11:40 UTC+2 schrieb 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
>>>>>>
>>>>>>
>>>>>> Am Dienstag, 9. September 2014 19:28:54 UTC+2 schrieb 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
>>>>>>> <http://www.polymer-project.org/docs/elements/core-elements.html#core-item>
>>>>>>> ?
>>>>>>>
>>>>>>> Lex
>>>>>>>
>>>>>>> Am Dienstag, 9. September 2014 19:10:37 UTC+2 schrieb 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.
>>>>>>>>
>>>>>>>> On Tue, Sep 9, 2014 at 7:36 AM, Atomiko Lex <[email protected]>
>>>>>>>> wrote:
>>>>>>>>
>>>>>>>>> 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
>>>>>>>>>
>>>>>>>>> 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 [email protected].
>>>>>>>>> To view this discussion on the web visit
>>>>>>>>> https://groups.google.com/d/msgid/polymer-dev/3c8281b2-
>>>>>>>>> d9a8-4e45-b8fd-9615d4514b2f%40googlegroups.com
>>>>>>>>> <https://groups.google.com/d/msgid/polymer-dev/3c8281b2-d9a8-4e45-b8fd-9615d4514b2f%40googlegroups.com?utm_medium=email&utm_source=footer>
>>>>>>>>> .
>>>>>>>>> For more options, visit https://groups.google.com/d/optout.
>>>>>>>>>
>>>>>>>>
>>>>>>>> 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 [email protected].
>>>> To view this discussion on the web visit
>>>> https://groups.google.com/d/msgid/polymer-dev/54046a3c-5835-49b5-9f3f-f86fa002e6d4%40googlegroups.com
>>>>
>>>> <https://groups.google.com/d/msgid/polymer-dev/54046a3c-5835-49b5-9f3f-f86fa002e6d4%40googlegroups.com?utm_medium=email&utm_source=footer>
>>>> .
>>>>
>>>> For more options, visit https://groups.google.com/d/optout.
>>>>
>>>
>>> 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 [email protected].
>>> To view this discussion on the web visit
>>> https://groups.google.com/d/msgid/polymer-dev/CACGqRCCr4UgFr2R1tEDstxOYS%2BFPpFjkW1NvNHwp1WUV%3D%2BcRVA%40mail.gmail.com
>>>
>>> <https://groups.google.com/d/msgid/polymer-dev/CACGqRCCr4UgFr2R1tEDstxOYS%2BFPpFjkW1NvNHwp1WUV%3D%2BcRVA%40mail.gmail.com?utm_medium=email&utm_source=footer>
>>> .
>>>
>>> For more options, visit https://groups.google.com/d/optout.
>>>
>>
>>
>>
>> --
>> Takayoshi Kochi
>>
>
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 [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/b29cc8f9-9251-4584-a082-636310d9c911%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
