各种HTML锚点跳转方式
1 js控制锚点跳转
<a name="anchor"></a>
location.hash="anchor";
不只有a其他元素也可以,比如在报表中:
<tr id="tr1">...</tr>
location.hash="tr1"
或者用jQuery的动画滚动效果:
var id="tr1";
$('html,body').animate({scrollTop: $("tr#"+id).offset().top}, 500);
2 html控制锚点跳转
<a href="#btn">跳转到点击位置</a>
<a name="btn" id="btn" > 点击</a>
3跨页面锚点跳转
代码如下
<a href="123.html#btn">跳到btn</a>
<a name="btn" id="btn" > </a>
4js控制锚点跳转在HTML中实现方式
- <div id="divNode"><!-- contents --></div><!-- 假设一个需要跳转到的节点 -->
- <a href="#" onclick="document.getElemetnById('divNode').scrollIntoView(true);return false;">通过scrollIntoView实现锚点效果</a>
各种HTML锚点跳转方式的更多相关文章
- html锚点的作用和js选项卡锚点跳转的使用
location是javascript里边管理地址栏的内置对象,比如location.href就管理页面的url,用location.href=url就可以直接将页面重定向url.而location. ...
- a 锚点跳转滑动效果
点击a链接时,跳转到相应id的位置处,有一个滑动效果. <a href="#my">我是跳转到div</a><div id="my" ...
- HTML meta锚点跳转 小tips
小tips meta锚点跳转 http://www.zhangxinxu.com/wordpress/2015/03/meta-http-equiv-refresh-content/
- JSP页面跳转方式
JSP页面跳转方式 1.利用按钮+javascript进行跳转 <input type="button" name="button2" value=&qu ...
- zepto的scrollTo,实现锚点跳转
实现功能:点击右侧字母A,实现锚点跳转功能: 有同学可能说可以直接用锚点跳转实现,是的,锚点跳转可以实现这个功能,但是有一个问题,点击跳转后,再点击返回,返回的是上次跳转的结果,具体的原理就不用多说了 ...
- ios中的界面跳转方式
ios中,两种界面跳转方式 1.NavgationController本身可以作为普通ViewController的容器,它有装Controller的栈,所以可以push和pop它们,实现你所说的跳转 ...
- JS页面打开方式丶对话框及页面跳转方式
一.js页面的三种打开方式 1. window.open 2. window.navigate("url") 跳转到目标页面 3. window.location.href=&qu ...
- JAVAEE学习——struts2_02:结果跳转方式、访问servletAPI方式、获得参数以及封装和练习:添加客户
一.结果跳转方式 <action name="Demo1Action" class="cn.itheima.a_result.Demo1Action" m ...
- JSP的几种跳转方式的异同
1 <jsp:foward page="url" /> 服务端跳转,立即跳转,后续语句不会执行: 2 <% response.sendRedirect(" ...
随机推荐
- (转)Unity控制反转和依赖注入
昨天,面试官说他们的项目使用的是Unity,我们的项目中使用的是autofac,看了一下,用法都差不多,就连方法的名字都是一样的哈,想了解的朋友可以看看这篇文章,作者讲解的挺详细的,关于autofac ...
- CF 291E. Tree-String Problem [dfs kmp trie图优化]
CF291E 题意:一棵树,每条边上有一些字符,求目标串出现了多少次 直接求目标串的fail然后一边dfs一边跑kmp 然后就被特殊数据卡到\(O(n^2)\)了... 因为这样kmp复杂度分析的基础 ...
- js作用域的相关知识
众所周知,在ES6之前,JavaScript是没有块级作用域的,如下图所示: 学过其他语言的同学肯定有点诧异,为什么会这样呢?因为js还是不同于其他语言的,在ES5中,只有全局作用域和函数作用域,并没 ...
- 洛谷P2756飞行员配对方案问题 P2055假期的宿舍【二分图匹配】题解+代码
洛谷 P2756飞行员配对方案问题 P2055假期的宿舍[二分图匹配] 飞行员配对方案问题 题目背景 第二次世界大战时期.. 题目描述 英国皇家空军从沦陷国征募了大量外籍飞行员.由皇家空军派出的每一架 ...
- 使用matlab生成sine波mif文件
使用matlab生成sine波mif文件 作者:lee神 在使用altera 的FPGA中的rom过程中常常会使用到.mif文件或.hex文件.对于初学者,无论mif还是hex都是很令人疑惑的东西,这 ...
- CSS单行、多行文本溢出显示省略号
如果实现单行文本的溢出显示省略号小伙伴们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; t ...
- Python自动化--语言基础3--字典、函数、全局/局部变量
字典 dict1 = {'name':'han','age':18,'class':'first'} print(dict1.keys()) #打印所有的key值 print(dict1.values ...
- 去掉chrome浏览器中input获得焦点时的带颜色边框呢
可以设置表单控件的outline属性为none值, 来去掉Chrome浏览器中输入框以及其它表单控件获得焦点时的带颜色边框. css代码如下: input{outline:none}
- 震撼功能:逐浪CMS全面支持PWA移动生成意指未来
Progressive Web App, 简称 PWA,是提升 Web App 的体验的一种新方法,能给用户原生应用的体验. PWA 能做到原生应用的体验不是靠特指某一项技术,而是经过应用一些新技术进 ...
- leetcode第一天
leetcode 第一天 2017年12月24日 第一次刷leetcode真的是好慢啊,三道题用了三个小时,而且都是简单题. 数组 1.(674)Longest Continuous Increasi ...