原生js模拟锚点，实现点击后，内容定位到本页的对应位置

今天在做angularJS项目过程中，遇见了一个需求，在一个页面中有多个表格，每个表格都有对应的分页，点击顶部对应的模块，可以定位到每个表格模块具体的位置。

页面如下所示：

 

 

在angular中，为了使url地址访问的时候更加方便，我们使用了html5mode方式，改变了url默认的hash样式，对html5mode详细了解请查看为什么angularjs使用ui-router时要使用html5Mode? 

 

这时，如果我们使用锚点的方法就会存在一个问题，当我们点击顶部的tab部分是，

 

 

页面的url就回变成http://www.×××××.com?brandId=1&brandName=***#434

 

这个时候我们在点击翻页的时候，页面就会跳转到页面的顶部，而不是我们访问的这个位置。

 

解决的办法是：

 

1. 不给tab部分添加类似与<a href="/test#333"></a>, 写成 <a href="javascript:;"></a>阻止a标签的默认操作。

2. 给 a 标签添加点击事件： <a href="javascript:;" ng-click="_scrollTo('someId')"></a>

3. 定义对应的实现方法：

　　function _scrollTo(id){

　　　　var _id = document.getElementById(id);

　　　　window.scrollTo(0,_id.offsetTop);

　　}

ps: 这里的id是我们想跳转到的节点对应的id