首页 >web前端 >js教程 > 正文

js 模仿锚点定位的实现方法

原创2017-01-04 17:41:130619
如下所示:

<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 模仿锚点定位的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支PHP中文网。

更多js 模仿锚点定位的实现方法相关文章请关注PHP中文网!

php中文网最新课程二维码

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

  • 相关标签:js 锚点 定位
  • 相关文章

    相关视频


    网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
  • 专题推荐

    推荐视频教程
  • javascript初级视频教程javascript初级视频教程
  • jquery 基础视频教程jquery 基础视频教程
  • 视频教程分类