使用a做锚点链接时，offset().top重复点击时位置不同的问题。

功能：

最近做了一个简单的功能，文章的内容导航，类似百科的右侧导航。考虑用锚点来实现，整个页面要求单屏显示。点击右侧的导航来定位左侧的内容位置。首先，想到的办法就是，通过右侧点击获取当前左侧锚点的对象，把它的offset().top，赋值给左侧内容父级的srcollTop，就OK了。

问题：

但是问题出现了，导航在第一次点击时，内容能正常链接过去，第二次再点击时内容的位置就不正常了。每次点击锚点时，因为a的位置变了，所以offset().top获取到视口的位置也不一样了，所以值一直在变。

解决：

虽然每次点击的位置都不一样，但是点与点之间的相对长度是不会改变的。如下图

使用a做锚点链接时，offset().top重复点击时位置不同的问题。

当前a的offest().top,在没有点击时，高度是黄色线，在点击后的高度就会变成粉色线。但是a与a之间的相对距离是不会变的，图中用浅绿线部分。需要写个方法来计算相对距离。

需把左侧内容中所有锚点a都获取出来，
获取出所有a对象的offset().top值，push到一个数组里。
对2生成的数组reduce下，获取出点与点之间的相对距离，放入数组里
因为第一个点的值永远都是0，在3生成的数组上unshift(0)，并把该数组return出去。

这样所有点之间的距离都有了。只需要在右侧的点击事件里调用上面这个方法就可以了。

arrDis() {
  var arr = [];
  var offsetTop = [];
  var dis = [];
  $('#' + this.id + ' a').each(function () {
    let aName = $(this).attr('href').replace(/#/, '')
    arr.push('a[name="' + aName + '"]')
  });
  arr.forEach(item => {
    offsetTop.push($("#catalog-cnt").find(item).offset().top);
  });
  offsetTop.reduce((prev, cur) => {
    return dis.push(cur - prev)
  })
  dis.unshift(0);
  return dis
},

使用a做锚点链接时，offset().top重复点击时位置不同的问题。

相关推荐