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 相关文章推荐
JavaScript中的比较操作符&gt;、=、
Dec 31 Javascript
JS中Location使用详解
May 12 Javascript
javascript加载xml 并解析各节点的值(实现方法)
Oct 12 Javascript
js字符串与Unicode编码互相转换
May 17 Javascript
vue-cli+webpack项目 修改项目名称的方法
Feb 28 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
Apr 18 Javascript
微信小程序ibeacon三点定位详解
Oct 31 Javascript
在vue中使用express-mock搭建mock服务的方法
Nov 07 Javascript
Vue 组件修改根实例的数据的方法
Apr 02 Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 Javascript
Vue+Koa2+mongoose写一个像素绘板的实现方法
Sep 10 Javascript
用javascript实现倒计时效果
Feb 09 Javascript
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读取txt文本文件并分页显示的方法
2015/03/11 PHP
PHP关联数组实现根据元素值删除元素的方法
2015/06/26 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
设定php简写功能的方法
2019/11/28 PHP
在IE下获取object(ActiveX)的Param的代码
2009/09/15 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
2013/08/11 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
2014/09/25 Javascript
jquery中checkbox全选失效的解决方法
2014/12/26 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 简史
2015/01/09 Javascript
学习javascript的闭包,原型,和匿名函数之旅
2015/10/18 Javascript
基于JavaScript实现仿京东图片轮播效果
2015/11/06 Javascript
全面解析Bootstrap表单使用方法(表单按钮)
2015/11/24 Javascript
AngularJS验证信息框架的封装插件用法【w5cValidator扩展插件】
2016/11/03 Javascript
探讨AngularJs中ui.route的简单应用
2016/11/16 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
js实现无缝滚动图
2017/02/22 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
2018/04/21 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
通过js随机函数Math.random实现乱序
2020/05/19 Javascript
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
python3使用SMTP发送HTML格式邮件
2018/06/19 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
基于Python的PIL库学习详解
2019/05/10 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
韩国女装NO.1网店:STYLENANDA
2016/09/16 全球购物
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
什么是重载?CTS、CLS和CLR分别做何解释
2012/05/06 面试题
党员公开承诺事项
2014/03/25 职场文书
材料化学专业求职信
2014/07/15 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
工资收入证明样本(5篇)
2014/09/16 职场文书
python正则表达式re.search()的基本使用教程
2021/05/21 Python