手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >js 模仿锚点定位的实现方法
js 模仿锚点定位的实现方法
摘要:如下所示:A-EF-LM-TU-Z$(function(){varnavLinks=$('#scroll_nav').find('a'),t...

如下所示:

<div> <div> <ul id="scroll_nav"> <li><a href="" title="" data-nav="a">A - E</a></li> <li><a href="" title="" data-nav="f">F - L</a></li> <li><a href="" title="" data-nav="m">M - T</a></li> <li><a href="" title="" data-nav="u">U - Z</a></li> </ul> </div> <script type="text/javascript"> $(function(){ var navLinks = $('#scroll_nav').find('a') , target_ul = $('#designer_nav_name') , _top = 0; $.each(navLinks , function( i , elem ){ $(elem).attr('data-to' , i == 0 ? 0 : _top); var id = $(elem).attr('data-nav'); var _h4 = $('#'+id).parent(); _top = parseInt(_h4.next().height()) + _top + parseInt(_h4.height()); $(elem).bind('click', function(){ target_ul[0].scrollTop = $(this).attr('data-to'); return false; }); }); $('#designer_nav_name li').click(function( e ){ var designer_name_href= $(this).find('a').attr("href"); $.getJSON("test.php?action=test&jsoncallback="+testidhref,function(data){ $('#Ttai').html(data.catwalk); }); e.preventDefault(); }); }) </script> <div id="designer_nav_name"> <h4><a name="a" id="a"><strong>A</strong></a></h4> <ul> <li></li> </ul> <h4><a name="f" id="f"><strong>F</strong></a></h4> <ul> <li></li> </ul><h4><a name="m" id="m"><strong>M</strong></a></h4><ul> <li></li> </ul><h4><a name="u" id="u"><strong>U</strong></a></h4><ul> <li></li> </ul> </div> </div>

以上这篇js 模仿锚点定位的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持查字典教程网。

【js 模仿锚点定位的实现方法】相关文章:

Jquery注册事件实现方法

JavaScript模版引擎的基本实现方法浅析

删除javascript所创建子节点的方法

js禁止页面刷新与后退的方法

javascript无刷新评论实现方法

如何实现浏览器上的右键菜单

js控制网页前进和后退的方法

JavaScript基于setTimeout实现计数的方法

javascript瀑布流布局实现方法详解

javascript操作ul中li的方法

精品推荐
分类导航