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

原生js模拟锚点,实现点击后,内容定位到本页的对应位置的更多相关文章

  1. js_html_input中autocomplete="off"在chrom中失效的解决办法 使用JS模拟锚点跳转 js如何获取url参数 C#模拟httpwebrequest请求_向服务器模拟cookie发送 实习期学到的技术(一) LinqPad的变量比较功能 ASP.NET EF 使用LinqPad 快速学习Linq

    js_html_input中autocomplete="off"在chrom中失效的解决办法 分享网上的2种办法: 1-可以在不需要默认填写的input框中设置 autocompl ...

  2. 使用JS模拟锚点跳转

    A-HTML锚点定义: 设置锚: <a href="#mao">&nsbp;</a> 设置点:(为了浏览器兼容性,id和name一起设置) < ...

  3. 原生 js 模拟 alert 弹窗

    复制头部的 js 代码到你的 js 文件的任何地方,调用Chef.alert方法传入相应的参数即可并没有什么功能,只是一个提示的作用,可能样式比 alert 的弹窗好看点,css是写在js里的,只要你 ...

  4. 原生JS实现旋转轮播图+文字内容切换

    废话不多说,直接上图看效果: 需求:点击左右按钮实现切换用户图片与信息: 原理:点击右侧左侧按钮,把3号的样式给2号,2号的给1号,1号的给5号,5号的给4号,4号的样式给3号,然后根据现在是第几张图 ...

  5. 原生JS模拟jQuery $

    模拟jQuery的$选择器 在获取元素的时候使用ID选择器,返回的是一个对象:使用类选择器或者标签选择器返回可能是一组元素:将获取到的一个或一组元素进行一个简易的封装封装成一个TQObject 什么是 ...

  6. 原生js模拟jquery写法

    function $_custom(fun) { document.onreadystatechange = function() { if (document.readyState == " ...

  7. 使用原生js模拟jQuery选择器,实现new方法,兼容ie5

    // 考虑到兼容ie5,未使用es6语法 /* 使用方法: 在<head>标签中(需使用ready方法): <script src="./jQuery2.js"& ...

  8. javascript项目实战之原生js模拟淘宝购物车

    通过JavaScript实现类似与淘宝的购物车效果,包括商品的单选.全选.删除.修改数量.价格计算.数目计算.预览等功能的实现.实现的效果图: 相应的代码: shoppingCart.html < ...

  9. 原生js模拟jquery中的addClass和removeClass方法

    js代码: //添加类 function addClass(obj,className) { if(obj.className == '') { //如果没有class obj.className = ...

随机推荐

  1. nginx负载SignalR

    前几天写了篇聊天室服务器扩展随想,今天有空开始实施第一步, 聊天服务器用SignalR self-host,负载用nginx,当然这只是测试,实际使用可能还需要修改. 第一步,搭好SignalR服务, ...

  2. sort()基础知识总结+超简短的英文名排序写法

    结合前些天学的箭头函数我想到一种非常简短的sort排序写法:(这可能是最短的英文名排序方法了) 贴出来大家一起探讨一下: [4,1,2,32].sort((x,y)=>x>y); //[1 ...

  3. java享元模式(flyweight)

    有个问题: Integer i1 = 12; Integer i2 = 12; System.out.println(i1 == i2);//输出true Integer i1 = 130; Inte ...

  4. 【原创】node+express+socket搭建一个实时推送应用

    技术背景 Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新. 应用场景: 监控系统:后台硬件热插拔.LED.温度.电压发生变化 即 ...

  5. 【日记】搭建一个node本地服务器

    用node搭建一个本地http服务器.首先了解htpp服务器原理 HTTP协议定义Web客户端如何从Web服务器请求Web页面,以及服务器如何把Web页面传送给客户端.HTTP协议采用了请求/响应模型 ...

  6. tomcat端口被占用问题完美解决方案!

    启动Tomcat服务器报错:Several ports (8005, 8080, 8009) required by Tomcat v7.0 Server at localhost are alrea ...

  7. ios打包ipa的四种实用方法(.app转.ipa)

    总结一下,目前.app包转为.ipa包的方法有以下几种: 1.Apple推荐的方式,即实用xcode的archive功能 Xcode菜单栏->Product->Archive->三选 ...

  8. PHP反射API

    近期忙着写项目,没有学习什么特别新的东西,所以好长时间没有更新博客.我们的项目用的是lumen,是基于laravel的一个轻量级框架,我看到里面用到了一些反射API机制来帮助动态加载需要的类.判断方法 ...

  9. pem转换成der

    openssl x509 -in xxxxx.pem -inform PEM -out xxxx.der -outform DER [root@NB Desktop]# file xxxx.der

  10. JS模块化

    一.原始写法 /* 模块就是实现特定功能的一组方法. 只要把不同的函数(以及记录状态的变量)简单地放在一起,就算是一个模块. 上面的函数m1()和m2(),组成一个模块.使用的时候,直接调用就行了. ...