tried it but im having *error on my console*
Uncaught SyntaxError: Unexpected token scrollToTopic: function(e) {
added {{scrollToTop}}
<core-item icon="gesture" label="Skills" name="skills" on-tap=
"{{scrollToTop}}"><a href="#skill"></a></core-item>
*then added a script on my index.html which where my core-scaffold located*
<script>
Polymer({
ready: function() {
scrollToTopic: function(e) {
var id = e.target.getAttribute('name');
if (id) {
this.$.core_scroll_header_panel.scroller.scrollTop =
this.$[id].offsetTop - 75;
}
}
}
});
</script>
sorry im only familiar with jquery only knows a bit
and here's my full index.html
<!DOCTYPE html>
<head>
<title>Test Site</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/viewportchecker.js?v=20120206"></script>
<script src="js/jigsv9.js?v=1.9"></script>
<script src="components/platform/platform.js"></script>
<link rel="stylesheet" type="text/css" href="css/animate.css" />
<link rel="import" href="components/polymer/polymer.html">
<link rel="import" href="components/core-scaffold/core-scaffold.html">
<link rel="import"
href="components/core-header-panel/core-header-panel.html">
<link rel="import" href="components/core-item/core-item.html">
<link rel="import" href="components/core-menu/core-menu.html">
<link rel="import" href="components/core-toolbar/core-toolbar.html">
<link rel="import" href="components/core-icon/core-icon.html">
<link rel="import" href="elements/header-koh.html">
<link rel="import" href="elements/toolbar-koh.html">
<link rel="import" href="elements/about-koh.html">
<link rel="import" href="elements/works-koh.html">
<link rel="import" href="elements/skills-koh.html">
<link rel="import" href="elements/contacts-koh.html">
<link rel="import"
href="components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="components/paper-fab/paper-fab.html">
<link rel="import"
href="components/font-roboto/roboto.html">
<link rel="stylesheet" href="foundation/css/foundation.css" />
<script src="foundation/js/vendor/modernizr.js"></script>
<link href="css/hover-min.css" rel="stylesheet" media="all">
<!-- load icons -->
<link rel="import" href="components/core-icons/av-icons.html">
<link rel="import" href="components/core-icons/communication-icons.html">
<link rel="import" href="components/core-icons/device-icons.html">
<link rel="import" href="components/core-icons/editor-icons.html">
<link rel="import" href="components/core-icons/hardware-icons.html">
<link rel="import" href="components/core-icons/image-icons.html">
<link rel="import" href="components/core-icons/maps-icons.html">
<link rel="import" href="components/core-icons/notification-icons.html">
<link rel="import" href="components/core-icons/social-icons.html">
</head>
<body unresolved>
<toolbar-koh></toolbar-koh>
<a href="http://google.com"; target="_blank"><paper-fab
icon="assignment-ind" class="cv"></paper-fab></a>
<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="account-circle" label="Who am i"></core-item>
<core-item icon="work" label="Works"></core-item>
<core-item icon="gesture" label="Skills" name="skills"
on-tap="{{scrollToTop}}"><a href="#skill"></a></core-item>
<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>
<div tool><strong>Test</strong> <span
style="font-weight:300;">Site</span></div>
<div>*<header-koh></header-koh>*</div>
<div class="ab-effect">
<div *id="about"*>
<about-koh></about-koh>
</div>
</div>
<div class="wk-effect">
<div *id="works"*>
<works-koh></works-koh>
</div>
</div>
<div class="sk-effect">
<div *id="skills"*>
*<skills-koh></skills-koh>*
</div>
</div>
<div class="ct-effect">
<div *id="contacts"*>
*<contacts-koh></contacts-koh>*
</div>
</div>
</core-scaffold>
<script src="foundation/js/vendor/jquery.js"></script>
<script src="foundation/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
<script>
Polymer({
ready: function() {
scrollToTopic: function(e) {
var id = e.target.getAttribute('name');
if (id) {
this.$.core_scroll_header_panel.scroller.scrollTop =
this.$[id].offsetTop - 75;
}
}
}
});
</script>
</body>
</html>
On Wednesday, November 12, 2014 2:33:26 PM UTC+8, Atomiko Lex wrote:
>
> I had a similar issue with an anchor link inside a core-header-panel going
> to an id in a core-scroll-header-panel, and was lucky to get a fix from
> Frankie Fu in this post
> <https://groups.google.com/forum/#!topic/polymer-dev/4U5NHNvnUzs>.
>
> I just needed to add this function:
> scrollToTopic: function(e) { var id = e.target.getAttribute(
> 'name'); if (id) { this.$.core_scroll_header_panel.
> scroller.scrollTop = this.$[id].offsetTop - 75; } }
> and give my core-item the corresponding name (skills in your case). Maybe
> that works or you can adapt it, if your element is not inside a
> core-scroll-header-panel.
> Lex
>
>
> Am Mittwoch, 12. November 2014 04:30:28 UTC+1 schrieb Gee Jay Almestas:
>>
>> im 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 will i do to do it? tried to use jquery but its
>> not working... see info below
>>
>> *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>im
>> trying to use a js script but its 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
>> <http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js>"></script>*
>>
>>
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/2de037ba-46aa-4704-8faa-23f469fbeb66%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
