h标签生成目录结构实现点击定位平滑移动

硅谷探秘者 560 0 0

1.生成树状目录结构

基于上篇文章,模拟使用线性顺序的h标签生成了树状的目录结构,只是数据结构的变化,本文将使用实际案例,实现生成目录结构并实现点击定位平滑移动。

2.案例

点击目录结构的title,页面会平滑移动到title所在的地方。

3.js实现

因为js+html+css篇幅较长,所以之展示js代码,源码可以点击这个链接下载。

http://jiajiajia.club/file/info/jF7ZJE/124

具体方法的作用看代码注释吧~

<script>
	/**
	*	链表节点信息
	**/
	function Node(data){
		this.data=data;
		this.next=null;
		this.prev=null;
	}
	/**
	*	双向链表数据结构
	**/
	function LinkedList(){
		this.head=null;
		this.tail=null;
		
		/**
		*	添加节点(添加的节点是尾节点)
		**/
		this.add=function(data){
			var node=new Node(data);
			if(this.head==null){
				this.head=this.tail=node;
			}else{
				node.prev=this.tail;
				this.tail.next=node;
				this.tail=node;
			}
		}
		
		/**
		*	删除目标节点
		**/
		this.delete=function(node){
			if(node==null){
				return null;
			}
			if(node==this.head&&node==this.tail){
				this.head=null;
				this.tail=null;
			}else if(node==this.head){
				this.head=this.head.next;
				this.head.prev=null;
			}else if(node==this.tail){
				this.tail=this.tail.prev;
				this.tail.next=null;
			}else{
				node.prev.next=node.next;
				node.next.prev=node.prev;
			}
			node.next=null;
			node.prev=null;
			return node;
		}
	}

	/**
	*	数据节点信息
	**/
	function createNode(name,level,h){
		return {
			name:name, //标签名称
			level:level, //标签级别
			child:new Array(), //标签子节点
			h:h, //真实标签元素
		};
	}
	
	/**
	*	生成链表和树的组合结构
	**/
	function create(h,arr){
		while(h!=null){
			var li=new LinkedList();
			while(h.next!=null){
				if(h.next.data.level>h.data.level){
					li.add(arr.delete(h.next).data)
				}else {
					break;
				}
			}
			/**
			*	递归生成子树
			**/
			create(li.head,li);
			h.data.child=li;
			h=h.next;
		}
	}
	
	/**
	*	将组合结构中的链表结构转换为数组结构
	**/
	function toArray(arr){
		var a=new Array();
		var h=arr.head;
		while(h!=null){
			if(h.data.child!=null){
				h.data.child=toArray(h.data.child);
			}
			a.push(h.data);
			h=h.next;
		}
		return a;
	}
	
</script>
<script>
	/**
	*	获取所有的h标签(标签是按照顺序获取的)
	**/
	var hs = document.querySelectorAll("h1,h2,h3,h4,h5,h6");
	/**
	*	目录父容器
	**/
	var ml=document.getElementById("ml");
	
	/**
	*	生成树结构
	**/
	function getTree(hs){
		var array=new LinkedList();
		for(var i=0;i<hs.length;i++){
			var h_number=hs[i].tagName.substring(1,2);
			array.add(createNode(hs[i].innerHTML,h_number,hs[i]));
		}
		create(array.head,array);
		return toArray(array);
	}
	
	var arrayData=getTree(hs);
	
	var index=0;
	
	/**
	*	生成目录树节点
	**/
	function createCataLog(p,list){
		if(list!=null&&list.length>0){
			var ul=document.createElement("ul");
			for(var i=0;i<list.length;i++){
				var thisIndex=++index; 
				var li=document.createElement("li");
				var span=document.createElement("span");
				span.appendChild(document.createTextNode(list[i].name))
				span.setAttribute("to", "id-"+thisIndex);
				span.setAttribute("class", "to");
				list[i].h.setAttribute("id",'id-'+thisIndex)
				li.appendChild(span);
				ul.appendChild(li);
				if(list[i].child!=null&&list[i].child.length>0){
					createCataLog(li,list[i].child);
				}
			}
			p.appendChild(ul);
		}
	}
	
	createCataLog(ml,arrayData);
	
	/**
	*	目录节点添加点击事件
	**/
	var tos = document.getElementsByClassName("to");
	for(var i=0;i<tos.length;i++){
		tos[i].addEventListener('click', function(){
            to(this.getAttribute("to"));
        })
	}
	
	/**
	*	标签平滑移动
	**/
	function to(id){
		var el=document.getElementById(id);
		var body = document.getElementsByTagName("html")[0];
		body.scrollTo({ 
			top: el.offsetTop, 
			behavior: "smooth" 
		})
	}
	
</script>

 

猜你喜欢
javascript js html 331 展示将文章中区域的h具体代码下载下来看看吧~
前端(h5) 514 1.前言例如在用富文本编辑器编辑文章的时候,会用到h来代表本段题,那么h是有顺序的,例如:h的顺序可能是这样的h1h1h2h3h1h3h2h4那么就应该是那么应该是
前端(h5) 1080 1.锚很简单两行搞:ahref="#anchorName"跳转到anchorName的置/aaname="anchorName"anchorName/a2.js代码,并带效果
linux系统 4644 linux的/bin:/usr/bin:可执行二进制文件的,如常用的命令ls、tar、mv、cat等。/boot:放置linux系统启时用到的一些文件。/boot/vmlinuz为
数据结构与算法 496 prim(普里姆)算法求出。对于任何一个数据或算法,理解和只是一个方面,更重要的是要明白它的应用范围或应用场景,最小树算法的应用非常广泛,例如:假设要在n个城市之间建立通信联络网,则连接n个
数据结构与算法 835 上一篇:广度优先搜索算法(bfs、广搜)java-数据和算法用邻接矩阵表示图的之间的关系如下图数据则用邻接矩阵表示为: privatestaticintmap
数据结构与算法 799 广度优先搜索算法(dfs、深搜)java-数据和算法用邻接矩阵表示图的之间的关系如下图的数据:则用邻接矩阵表示为: privatestaticintmap[][]={ {0,3,6
框架 3293 javaspringboot态添加或时器(时任务)工具类importjava.lang.reflect.Field;importjava.lang.reflect.Method
归档
2018年11月  12 2018年12月  33 2019年01月  28 2019年02月  28 2019年03月  32 2019年04月  27 2019年05月  33 2019年06月  6 2019年07月  12 2019年08月  12 2019年09月  21 2019年10月  8 2019年11月  15 2019年12月  25 2020年01月  9 2020年02月  5 2020年03月  16 2020年04月  4 2020年06月  1 2020年07月  7 2020年08月  13 2020年09月  9 2020年10月  5 2020年12月  3 2021年01月  1 2021年02月  5 2021年03月  7
标签
算法基础 linux 前端 c++ 数据结构 框架 数据库 计算机基础 储备知识 java基础 ASM 其他 深入理解java虚拟机 nginx git 消息中间件 搜索 maven redis docker dubbo
目录