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

 更新时间:2016年11月19日 10:07:07   投稿:jingxian  
下面小编就为大家带来一篇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') , _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 模仿锚点定位的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 前端如何用post的方式进行eventSource请求

    前端如何用post的方式进行eventSource请求

    这篇文章主要给大家介绍了关于前端如何用post的方式进行eventSource请求的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-04-04
  • 酷! 不同风格页面布局幻灯片特效js实现

    酷! 不同风格页面布局幻灯片特效js实现

    这篇文章主要为大家详细介绍了超酷不同风格页面布局幻灯片特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 微信小程序实现搜索商品和历史记录的功能

    微信小程序实现搜索商品和历史记录的功能

    这篇文章主要为大家详细介绍了微信小程序实现搜索商品和历史记录的功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 基于JavaScript实现游戏购物车效果详解

    基于JavaScript实现游戏购物车效果详解

    这篇文章主要介绍了如何利用JavaScript实现游戏购物车效果,文中的实现代码讲解详细,对我们学习JavaScript有一定帮助,需要的可以参考一下
    2022-03-03
  • js实现数组去重方法及效率對比

    js实现数组去重方法及效率對比

    本文主要介绍了js实现数组去重方法及效率對比。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 在标题栏显示新消息提示,很多公司项目中用到这个方法

    在标题栏显示新消息提示,很多公司项目中用到这个方法

    在标题栏显示新消息提示,很多公司项目中用到这个方法,需要的朋友可以参考下。
    2011-11-11
  • 基于JavaScript编写一个图片转PDF转换器

    基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下
    2022-07-07
  • Js,alert出现乱码问题的解决方法

    Js,alert出现乱码问题的解决方法

    Js,alert出现乱码问题的解决方法,需要的朋友可以参考一下
    2013-06-06
  • JavaScript中map属性示例详解

    JavaScript中map属性示例详解

    Map对象在JavaScript中提供了一种灵活且高效的键值对存储方式,它具有许多实用的方法,如set()、get()、has()和delete()等,使得操作和管理键值对变得更加简单,这篇文章主要介绍了JS中map属性,需要的朋友可以参考下
    2024-08-08
  • JavaScript循环遍历的24个方法,你都知道吗

    JavaScript循环遍历的24个方法,你都知道吗

    这篇文章主要给大家介绍了关于JavaScript循环遍历的24个方法,文中对每种方法都给出了详细的实例代码,方便大家理解学习,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2021-09-09

最新评论