首页 > 编程 > JavaScript > 正文

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

2019-11-19 18:55:22
字体:
来源:转载
供稿:网友

如下所示:

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表