页内锚点滚动修正及动画效果
标签:设计

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

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

  • 2 min read
  • 等待开放

CONTRIBUTORS


  • 2 min read
  • 等待开放