sorry because im only a newbie coder and only know basic jquery so don't
have any idea of how to deal with it.. would be better if can add it to
this code
<script>
var scraffold = document.getElementById('scaffold');
var menu = document.getElementById('menu');
menu.addEventListener('core-select', function(e) {
if (e.detail.isSelected) {
scrollToSection(e.detail.item.getAttribute('name'));
}
});
function scrollToSection(id) {
var section = document.getElementById(id);
if (section) {
scaffold.$.headerPanel.scroller.scrollTop = section.offsetTop;
}
}
</script>
On Thursday, November 13, 2014 10:11:24 AM UTC+8, Eric Bidelman wrote:
>
> Smooth scrolling is coming to the native DOM APIs:
> https://www.chromestatus.com/features/5812155903377408
>
> On Thu, Nov 13, 2014 at 1:05 PM, Gee Jay Almestas <[email protected]
> <javascript:>> wrote:
>
>> thanks alot this solved my problem... can i request one more thing? to
>> add a smooth scroll effect :) many thanks
>>
>> On Thursday, November 13, 2014 9:36:56 AM UTC+8, Frankie Fu wrote:
>>>
>>> Your code is not correct about where you can use Polymer({... }); I
>>> suggest to read the "Understanding Polymer" section here:
>>> https://www.polymer-project.org/docs/start/everything.html
>>>
>>> Here is a simple example (doesn't use jquery) that demonstrates how you
>>> can scroll to section. Hopefully that gives you some ideas to proceed:
>>> http://jsbin.com/yusafewoto/1/edit
>>>
>>>
>>> On Wed, Nov 12, 2014 at 5:25 PM, Gee Jay Almestas <[email protected]>
>>> wrote:
>>>
>>>> *ok here's my new error now*
>>>>
>>>> <http://i.gyazo.com/d2988af58b82ef7744e00a6e8301b749.png>
>>>>
>>>> http://i.gyazo.com/d2988af58b82ef7744e00a6e8301b749.png
>>>>
>>>>
>>>> *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="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="{{scrollToTopic}}"><a href="#skill"></a></core-item> *
>>>> * <core-item icon="settings-phone" label="Contacts"
>>>> name="contacts" on-tap="{{scrollToTopic}}"><a
>>>> href="#contacts"></a></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" touch-action="pan-y">
>>>> <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({ *
>>>> * scrollToTopic: function(e) {*
>>>> * var id = e.target.getAttribute('name');*
>>>> * if (id) {*
>>>> * this.$.core_scaffold.scroller.scrollTop =
>>>> this.$[id].offsetTop - 75;*
>>>> * }*
>>>> * }*
>>>>
>>>> * });*
>>>> * </script>*
>>>>
>>>>
>>>>
>>>> </body>
>>>> </html>
>>>>
>>>>
>>>>
>>>> can anyone do it on jsfiddle? thanks
>>>>
>>>>
>>>>
>>>>
>>>> On Wednesday, November 12, 2014 11:30:28 AM UTC+8, Gee Jay Almestas
>>>> wrote:
>>>>>
>>>>> 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/f8323ede-d4f6-43cd-8ccc-17569390e2b0%
>>>> 40googlegroups.com
>>>> <https://groups.google.com/d/msgid/polymer-dev/f8323ede-d4f6-43cd-8ccc-17569390e2b0%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] <javascript:>.
>> To view this discussion on the web visit
>> https://groups.google.com/d/msgid/polymer-dev/cf9433e4-7568-4b34-b010-08d1f46e0014%40googlegroups.com
>>
>> <https://groups.google.com/d/msgid/polymer-dev/cf9433e4-7568-4b34-b010-08d1f46e0014%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/c1924d04-fd60-4647-bf52-89e88b5cd87e%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
