这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面小编就为大家带来一篇 js 模仿锚点定位的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
如下所示:
- <div class="designer-bg ov">
- <div class="w-77 f-l designer-nav">
- <ul id="scroll_nav">
- <li class="designer-nav-li">
- <a href="" title="" data-nav="a">
- A - E
- </a>
- </li>
- <li class="designer-nav-li">
- <a href="" title="" data-nav="f">
- F - L
- </a>
- </li>
- <li class="designer-nav-li">
- <a href="" title="" data-nav="m">
- M - T
- </a>
- </li>
- <li class="designer-nav-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=?&testid=" + testidhref,
- function(data) {
- $('#Ttai').html(data.catwalk);
- });
- e.preventDefault();
- });
- })
- </script>
- <div class="f-r designer-index" 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 模仿锚点定位的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持 phperz。
来源: http://www.phperz.com/article/17/0522/330378.html