源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2022-06-27 11:01 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:js 模仿锚点定位的实现方法
[b]如下所示:[/b]
<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 模仿锚点定位的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部