实现侧边内容的动态跳转,非锚点。 点击右侧的文章侧边导航栏,实现动态效果跳转。

怎么实现滴?

找到hexo文件夹中你选择的主题文件夹,在我这是themes/indigo 进入source/js,修改js文件

/*
 * d->document;
 * animate->requestAnimationFrame
 */
var links = d.querySelectorAll('.post-toc-link');
for(var i = 0;i < links.length;i++){
	var link = links.item(i);
	link.addEventListener('click',function(e){
		e.preventDefault();
		var id = this.hash;
		var tg = d.querySelector(id);
		var max = d.body.scrollHeight - d.body.offsetHeight,tg_parent_top = tg.offsetParent.offsetTop;
		function scrollToLink(){
			var to = tg.offsetTop+tg_parent_top - 40,
				top = d.body.scrollTop;
			if(top > to){
				top -= 130;
				if(top < to){
					d.body.scrollTop = to;
					return;
				}
				d.body.scrollTop = top;
				animate(arguments.callee);
			}
			else if(top < to){
				if(top==max){
					d.body.scrollTop = to;
					return;
				}
				top += 130;
				if(top > to){
					d.body.scrollTop = to;
					return;
				}
				d.body.scrollTop = top;
				animate(arguments.callee);
			}	
		}
		animate(scrollToLink);
	})
};

经过这个小Demo,我发现一个小知识点

元素的offsetTop对相对于其设置了position属性的祖宗元素(若无则为body)。

不信?!请看下面的测试

我是第一!

第一的内容! `position:relative; height:700px; `

我是第二!

第二的内容! ` height:800px; `

我是第三!

第三的内容! ` height:500px; `


> 更多的细节还可以看元素的`offsetParent`属性