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

相关文章

  • js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换&#XX函数代码

    js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换AS

    这篇文章主要介绍了js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换&#XXXX,需要的朋友可以参考下
    2016-12-12
  • js转html实体的方法

    js转html实体的方法

    下面小编就为大家带来一篇js转html实体的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • JS数组去重的6种方法完整实例

    JS数组去重的6种方法完整实例

    这篇文章主要介绍了JS数组去重的6种方法,结合完整实例形式总结分析了javascript针对数组去除重复项的相关原理与操作技巧,需要的朋友可以参考下
    2018-12-12
  • 基于JavaScript实现活动倒计时效果

    基于JavaScript实现活动倒计时效果

    这篇文章主要为大家详细介绍了基于JavaScript实现活动倒计时效果,距离活动时间还剩多少,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • JS中的算法与数据结构之队列(Queue)实例详解

    JS中的算法与数据结构之队列(Queue)实例详解

    这篇文章主要介绍了JS中的算法与数据结构之队列(Queue),结合实例形式详细分析了javascript中队列的概念、原理、定义及常见操作技巧,需要的朋友可以参考下
    2019-08-08
  • js Canvas实现圆形时钟教程

    js Canvas实现圆形时钟教程

    这篇文章主要为大家详细介绍了HTML5 Canvas实现圆形时钟简易教程,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-09-09
  • 每天一篇javascript学习小结(面向对象编程)

    每天一篇javascript学习小结(面向对象编程)

    这篇文章主要介绍了javascript中的面向对象编程知识点,对面向对象编程进行概述,以及各种方法进行整理,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 15位和18位身份证JS校验的简单实例

    15位和18位身份证JS校验的简单实例

    下面小编就为大家带来一篇15位和18位身份证JS校验的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • Nautil 中使用双向数据绑定的实现

    Nautil 中使用双向数据绑定的实现

    这篇文章主要介绍了Nautil 中使用双向数据绑定的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • ES6下子组件调用父组件的方法(推荐)

    ES6下子组件调用父组件的方法(推荐)

    ES6下如何实现子组件调用父组件?下面小编就为大家分享一篇ES6下子组件调用父组件的方法。希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02

最新评论