[英]Polymer Scroll to div issue
我在菜单中使用了核心支架和核心项目。 我也有一个由div id包裹的我自己的元素。 我希望我的核心项目菜单在单击时滚动到该div ...我该怎么办? 我尝试使用jquery,但无法正常工作。请参阅下面的信息。
https://groups.google.com/forum/#!topic/polymer-dev/3wZ__kbHDJU
这是我的标题面板:
<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>
我的元素:
<div id="skills"> <!-- should scroll on this part -->
<skills-koh></skills-koh> <!-- my element -->
</div>
</core-scaffold>
我正在尝试使用js脚本,但无法正常工作:
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' );
});
还添加在我的index.html上:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
我假设您想滚动到#skills
元素,对不对? 然后:
1) <a class="nav" href="#skill"></a>
出现错字
2) this.hash
没有this.hash
任何内容。 根据您的代码,它应该是this.prop('href')
3)您在哪里尝试使用该jQuery? 内部组件core-item
? 如果在外部,则该元素将不起作用,因为该<a class="nav"...
元素未公开给DOM,而是包装在它自己的模板/ Shadow DOM中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.