js 模仿锚点定位

最新推荐文章于 2022-03-04 23:38:56 发布

sunbiao0526

最新推荐文章于 2022-03-04 23:38:56 发布

阅读量5k

点赞数

分类专栏： HTML JAVASCRIPT 文章标签： function class scroll div

本文链接：https://blog.csdn.net/sunbiao0526/article/details/7373564

版权

JAVASCRIPT 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

HTML

5 篇文章 0 订阅

订阅专栏

<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>