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


Posted in Javascript onNovember 19, 2016

如下所示:

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

Javascript 相关文章推荐
js确定对象类型方法
Mar 30 Javascript
jquery统计复选框选中示例
Nov 05 Javascript
js控制当再次点击按钮时的间隔时间
Jun 03 Javascript
jquery插件bxslider用法实例分析
Apr 16 Javascript
js复制内容到剪贴板代码,js复制代码的简单实例
Oct 27 Javascript
微信小程序 弹窗自定义实例代码
Mar 08 Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
Vue.js 动态为img的src赋值方法
Mar 14 Javascript
微信小程序实现预览图片功能
Oct 22 Javascript
在Vue中使用mockjs代码实例
Nov 25 Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
Javascript使用function创建类的两种方法(推荐)
Nov 19 #Javascript
js 中获取制定的cook信息实现方法
Nov 19 #Javascript
微信小程序入门教程
Nov 18 #Javascript
网络传输协议(http协议)
Nov 18 #Javascript
基于JS组件实现拖动滑块验证功能(代码分享)
Nov 18 #Javascript
Ajax的概述与实现过程
Nov 18 #Javascript
简单谈谈ES6的六个小特性
Nov 18 #Javascript
You might like
php Hex RGB颜色值互换的使用
2013/05/10 PHP
关于ob_get_contents(),ob_end_clean(),ob_start(),的具体用法详解
2013/06/24 PHP
PHP使用ffmpeg给视频增加字幕显示的方法
2015/03/12 PHP
PHP开发Apache服务器配置
2015/07/15 PHP
PHP设计模式之模板方法模式定义与用法详解
2018/04/02 PHP
js 与或运算符 || &amp;&amp; 妙用
2009/12/09 Javascript
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
深入探究使JavaScript动画流畅的一些方法
2015/06/30 Javascript
值得分享的JavaScript实现图片轮播组件
2016/11/21 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
vue 使用element-ui中的Notification自定义按钮并实现关闭功能及如何处理多个通知
2019/08/17 Javascript
Vue路由之JWT身份认证的实现方法
2019/08/26 Javascript
解决layui表格的表头不滚动的问题
2019/09/04 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)
2020/04/07 Javascript
python实现文件路径和url相互转换的方法
2015/07/06 Python
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
Python实现简易版的Web服务器(推荐)
2018/01/29 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
Python filter过滤器原理及实例应用
2020/08/18 Python
Nip + Fab官网:英国美容品牌
2019/08/26 全球购物
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
UNOde50美国官网:西班牙珠宝品牌
2020/08/15 全球购物
自荐信范文
2013/12/10 职场文书
2014年创先争优活动总结
2014/05/04 职场文书
个人批评与自我批评材料
2014/10/17 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python
python基础入门之普通操作与函数(三)
2021/06/13 Python
vue-router中hash模式与history模式的区别
2021/06/23 Vue.js
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android
Java实现带图形界面的聊天程序
2022/06/10 Java/Android