动态移动到锚点位置

发表于 | 分类于 | 阅读次数
undefined

之前觉得，动态移动到锚点位置是一件挺难实现的事情。要计算需要滚动的距离什么的。而且可能是被自己第一次项目的经验左右了，滚动距离只会取body的距离，自己走进了死胡同。没想到，问了一下迅雷小哥，给了我个超级无敌优雅的实现方式。

先上代码再解释！因为只是个我自己没想到的细节问题啊喂。

1
2
.html 文件
<a href="#pane1">锚点链接</a>

没错，就是锚点的常规写法啊，一点花里胡哨都没有！精髓都在js代码上啦

1
2
3
4
5
6
7
8
9
10
.js 代码
// 抓取被点击的需要锚点跳转的按钮的href属性
var _href = $(this).attr('href');
// 抓取需要链接过去的位置在页面的高度
// 这里可以直接用_href的原因是因为我用的是ID记行标识锚点位置
var _pos = $(_href).offset().top;
// 运用动画函数，将页面动态滚动到指定位置上
jQuery('html,body').animate({scrollTop:_pos},500);
// 取消浏览器默认行为
return false;

没错，就这么简单！（虽然其实实现的效果也很简单）。这里用的是jq进行的操作。但是其实用原生也可以的啦~~animate函数是已经在别处实现过的啦，暂时缺链接。然后高度可以这样获取。

document.body.scrollTop

scrollIntoView()

这是html5提供的方法，不过没办法实现动态效果呐，所以只当做mark一下
任何HTML元素都可以调用该方法，传入true时，元素会尽可能与视口顶部平齐。传入false，则尽可能全部出现，尽可能与视口底部平齐。