Tuesday 15 February 2011

javascript - Polymer Scroll to div issue -



javascript - Polymer Scroll to div issue -

i'm using core-scaffold , core-item menu. have own element wrapped div id. want core-item menu scroll div when click it... can do it? tried utilize jquery it's not working... see info below.

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

here's 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 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 go 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 part --> <skills-koh></skills-koh> <!-- element --> </div> </core-scaffold>

i'm trying utilize js script 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 index.html:

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

i assume want scroll #skills element, right? then:

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

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

3) trying utilize jquery? within component core-item? if outside, won't work since <a class="nav"... element isn't exposed dom, wrapped within it's own template / shadow dom.

javascript jquery polymer

No comments:

Post a Comment