页内锚点滚动修正及动画效果
October 31, 2017
设计 ,
昨天在写引用时发现了一个页面上的 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);
具体效果可以看我这篇文章
加入评论