只是玩玩 All work and no play makes Jack a dull boy

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

设计 ,

昨天在写引用时发现了一个页面上的 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);

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

作者: 1900

最后修改:

加入评论