页内锚点滚动修正及动画效果

昨天在写引用时发现了一个页面上的BUG，在页面上点击文章内的对应的引用数字会跳转到页脚对应的引用区。但是因为我页面的头部有一条固定高度为50px的导航条，点击连接后虽然会跳转到引用区域，但是会被导航条遮住50px高度的内容。而且跳转没有过渡动画，很僵硬...

感觉这个可以用回到顶部中用到的修改元素的data-offset来解决这个问题，起初是想直接用js上的一个滚动框架来实现这个功能，后来发现改不来。干脆照着自己写了个函数。

先是查找下页面上所有锚点链接并用jquery绑定一个新的点击事件，选择器可以用css的属性选择器写法如a[href^="#"]过滤所有以#符号开头的a链接。绑定一个点击函数，用preventDefault阻值默认的点击事件，然后用jquery的animate来实现动画效果的滚动，并滚动滚动条到目标元素的位置，并加上我导航条的高度修正scrollTop: $(this.hash).offset()-55，最终代码如下。

$('.post-content sup a[href^="#"]').click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop: $(this.hash).offset()-55}, 400);
                });

后来发现还有其他地方需要用到这个东西来做页面内的定位(比如定位到comment区等等)，所以把代码提取优化了一下，做了一个函数如下：

function linkEV(selector,fixSet = 0){
	$(selector).click(function(e){
e.preventDefault();
$('html, body').animate({scrollTop: $(this.hash).offset().top+fixSet}, 400);
                });
}

调用，传入不同选择器和修正数值即可灵活引用了。

linkEV('.post-content blockquote[id^="fn"]  a[href^="#"]',-55);
linkEV('.post-content sup a[href^="#"]',-55);

具体效果可以看我这篇文章