今天在做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

最新文章

  1. 【BZOJ-4423】Bytehattan 并查集 + 平面图转对偶图
  2. Cocos2dx 多点触控
  3. 怎样用C#代码知道是否已连接网络
  4. 基础套接字的C#网络编程
  5. 函数(Function)作用域 / 远程函数执行
  6. 移动端 前端框架 amaze ui
  7. 关于运行springboot时报Unregistering JMX-exposed beans on shutdown的解决方案
  8. 2017-2018-2 20155309南皓芯 Exp4 恶意代码分析
  9. k2datas 基础编程题,判断字符串是否有重复串
  10. Guideline 5.2.1 - Legal - Intellectual Property 解决方案
  11. Python基础-python数据类型(四)
  12. ImportError: libmysqlclient_r.so.16: cannot open shared object file: No such file or directory
  13. LeetCode110.平衡二叉树
  14. CompletionService简讲
  15. WHAT I READ FOR DEEP-LEARNING
  16. 【问题收集·中级】关于XMPP使用Base传送图片
  17. HTML5基础扩展——地理位置、本地存储、缓存
  18. Excel长数字防止转换为科学计数法
  19. go下载安装
  20. AWR实战分析之---- PX Deq Credit: send blkd (转载)

热门文章

  1. C#实现快速排序
  2. bodyParser中间件的研究
  3. 浅谈spring 声明式事物
  4. HTML 保存图片到本地
  5. SQL Server删除重复行的6个方法
  6. (原创)ssm sql 例子(freemarker+jsp)
  7. 整数转IP地址
  8. 关于ZedGraph
  9. Mysql InnoDB 共享表空间和独立表空间
  10. Web Service 的创建简单编码、发布和部署