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