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

网络编程 2021-07-04 19:19www.168986.cn编程入门
狼蚁网站SEO优化长沙网络推广就为大家带来一篇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') , _ = 0;
	$.each(navLinks , function( i , elem ){
		$(elem).attr('data-to' , i == 0 ? 0 : _);
		var id = $(elem).attr('data-nav');
		var _h4 = $('#'+id).parent();
		_ = parseInt(_h4.next().height()) + _ + 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 模仿锚点定位的实现方法就是长沙网络推广分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持狼蚁SEO。

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by