scrollTop，offsetTop，scrollIntoView配合实现简单的定位功能

js的各种offsetXXX和scrollXXX的介绍非常多，其使用也非常广泛，特别是在需要对页面定位的时候，最近实现一个简单的目录点击定位内容及滚动屏幕定位目录标题的小功能，完全是靠这两个属性实现，当然事件监听啥的，这肯定是必要的。

直接上代码：

一、页面滚动，自动定位目录：

//滚动页面目录自动定位显示
let autoActive = function(){
	let html_top = document.getElementsByTagName("html")[0].scrollTop; //获得父级卷去的高度
	//标题自动定位
	for (let i = 0 ;i < h3_len ; i++) {
        //父级卷去高度与对应文字标题距离顶部高度对比，小于说明对应标题显示在可视口内
		if (html_top <= h3_eles[i].offsetTop) {   
			//省略获得目录列表中对应index的列表内容，并添加激活样式，删除其他列表项激活样式代码
			break;
		}
	}
};
document.addEventListener("scroll",autoActive);	

上面是滚动屏幕根据卷去的内容，自动定位目录列表中相应的标题，核心就是比对父级卷去高度与相应标题距顶部的高度（此处以html为父级）如果小于，则说明当前标题可视，则改变目录中对应的样式即可，注意事件绑定与事件处理函数的分离，后续需要有其他操作。

二、点击目录，定位页面内容

//点击目录切换函数其中变量为已经定义好的DOM节点，根据需要自行定义即可
let switchCatalog = function(e){
	//点击时取消滚动事件，防止冲突
	document.removeEventListener("scroll",autoActive);
	let index = e.target.index;
	//激活切换
	e.target.className += " active-catalog";
    
    //取消其他对应列表的样式	
    for (let i = 0; i< a_len;i++) {
		if(a_eles[i].index != index){
			a_eles[i].className = "";
		};
	};

    //滚动页面内容
	h3_eles[index