原生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标签的默认操作。
3. 定义对应的实现方法:
function _scrollTo(id){
var _id = document.getElementById(id);
window.scrollTo(0,_id.offsetTop);
}
ps: 这里的id是我们想跳转到的节点对应的id
原生js模拟锚点,实现点击后,内容定位到本页的对应位置的更多相关文章
- 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 ...
- 使用JS模拟锚点跳转
A-HTML锚点定义: 设置锚: <a href="#mao">&nsbp;</a> 设置点:(为了浏览器兼容性,id和name一起设置) < ...
- 原生 js 模拟 alert 弹窗
复制头部的 js 代码到你的 js 文件的任何地方,调用Chef.alert方法传入相应的参数即可并没有什么功能,只是一个提示的作用,可能样式比 alert 的弹窗好看点,css是写在js里的,只要你 ...
- 原生JS实现旋转轮播图+文字内容切换
废话不多说,直接上图看效果: 需求:点击左右按钮实现切换用户图片与信息: 原理:点击右侧左侧按钮,把3号的样式给2号,2号的给1号,1号的给5号,5号的给4号,4号的样式给3号,然后根据现在是第几张图 ...
- 原生JS模拟jQuery $
模拟jQuery的$选择器 在获取元素的时候使用ID选择器,返回的是一个对象:使用类选择器或者标签选择器返回可能是一组元素:将获取到的一个或一组元素进行一个简易的封装封装成一个TQObject 什么是 ...
- 原生js模拟jquery写法
function $_custom(fun) { document.onreadystatechange = function() { if (document.readyState == " ...
- 使用原生js模拟jQuery选择器,实现new方法,兼容ie5
// 考虑到兼容ie5,未使用es6语法 /* 使用方法: 在<head>标签中(需使用ready方法): <script src="./jQuery2.js"& ...
- javascript项目实战之原生js模拟淘宝购物车
通过JavaScript实现类似与淘宝的购物车效果,包括商品的单选.全选.删除.修改数量.价格计算.数目计算.预览等功能的实现.实现的效果图: 相应的代码: shoppingCart.html < ...
- 原生js模拟jquery中的addClass和removeClass方法
js代码: //添加类 function addClass(obj,className) { if(obj.className == '') { //如果没有class obj.className = ...
随机推荐
- httpie 取代 curl
接口测试有人喜欢postman(for windows or mac) 如果长期用linux工作,可能更喜欢命令的方式,比如curl最近深入了解了下django-rest-framwork,他们推荐了 ...
- 163邮件出错:不允许使用邮箱名称。 服务器响应为: authentication is required,smtp7,C8CowEDpS0+Uke9VvSmXBg--.546S2 1441763733
原因:用163邮箱发邮件,需开启smtp服务,开启服务时,要求使用客户端授权码. 在.net中,使用smtp发邮件,在验证中使用的密码,是上面所讲的客户端授权码,而不是注册和web登录时用的邮箱密码. ...
- Python全栈开发【基础三】
Python全栈开发[基础三] 本节内容: 函数(全局与局部变量) 递归 内置函数 函数 一.定义和使用 函数最重要的是减少代码的重用性和增强代码可读性 def 函数名(参数): ... 函数体 . ...
- maven学习(中)- 私服nexus搭建
接上回继续,相信大家对maven每次都联网从国外站点下载依赖项的龟速网络已经不坎忍受了,今天先来看看如何搭建"仓库私服",目前nexus是使用比较广泛的私服软件之一,下面将介绍基本 ...
- hadoop2.6.4 搭建单机模式
注(要先安装jdk,最好jdk版本>=1.7) 安装jdk http://www.cnblogs.com/zhangXingSheng/p/6228432.html 给普通用户添加su ...
- LeetCode 345. Reverse Vowels of a String
Write a function that takes a string as input and reverse only the vowels(元音字母) of a string. Example ...
- 那些年,坑死自己的事之fread/fwrite
今天继续看牛人做过的东西,这个小程序并不大,加上相当多的注释行,才5000多行.这个小程序是在linux下实现的,之前自己也一直用vi来看并加以更加详细的注释,但是效率实在太低.于是将其转移到wind ...
- 【Java EE 学习 83 上】【SpringMVC】【基本使用方法】
一.SpringMVC框架概述 什么是SpringMVC?SpringMVC是一个和Struts2差不多的东西,他们的作用和性质几乎是相同的,甚至开发效率上也差不多,但是在运行效率上SpringMVC ...
- 让IIS支持bootstrap 增加svg和woff格式文件的支持
增加以下两种文件类型即可: .woff application/x-woff.svg image/svg+xml
- setInterval的停止与启动
最近写代码,需要停止interval之后再重新启动,开始使用代码如下,发现无法重新启动 function func(){console.log("print")} //定时任务 v ...