Polymer Scroll to div issue

Question

I'm using core-scaffold and core-item for my menu. I also have my own element wrapped by a div id. I want my core-item menu to scroll to that div when i click it... what can I do to do it? I tried to use jquery but it's not working... see info below.

https://groups.google.com/forum/#!topic/polymer-dev/3wZ__kbHDJU

Here's my header panel:

<core-scaffold responsiveWidth="600px">
  <core-header-panel navigation flex mode="scroll">
    <core-toolbar>Navigation</core-toolbar>
    <core-menu theme="core-light-theme">
        <core-item icon="home" label="Home"></core-item>
        <core-item icon="assignment-ind" label="Who am i"></core-item>  
        <core-item icon="work" label="Works"></core-item>
        <core-item icon="work" label="Skills"><a class="nav" href="#skill"></a></core-item> <!-- WHEN CLICK WILL GO TO SKILL ID DIV -->  
        <core-item icon="settings-phone" label="Contacts"></core-item>
        <core-item icon="link" label="v8"></core-item>
        <core-item icon="link" label="v7"></core-item>
        <core-item icon="link" label="v6"></core-item>
    </core-menu>
  </core-header-panel>

My element:

<div id="skills"> <!-- should scroll on this part -->
    <skills-koh></skills-koh> <!-- my element -->
</div>

</core-scaffold>

I'm trying to use a js script but it's not working:

jQuery(".nav").on("click", function(event){
    event.preventDefault(); 
     var dest=null;
     if(($($(this.hash)).offset().top) > ($(document).height()-$(window).height())){
          dest= $(document).height()-$(window).height();
     }else{
          dest=$($(this.hash)).offset().top;
     }
    $($(this.hash)).trigger("click");
    $('html,body').animate({scrollTop:dest}, 500, 'swing' );

 });

Also added on my index.html:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

Samuli Hakoniemi Samuli Hakoniemi · Accepted Answer · 2014-11-12T08:39:48

I assume you want to scroll to #skills element, right? Then:

1) <a class="nav" href="#skill"></a> is having a typo

2) this.hash isn't refering to anything. It should be, according to your code, this.prop('href')

3) Where are you trying to use that jQuery? Inside the component core-item? If outside, then it won't work since that <a class="nav"... element isn't exposed to DOM, but wrapped inside it's own template / Shadow DOM.

Polymer Scroll to div issue

1 Answers