各种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(" ...
随机推荐
- NIO基础篇(二)
Selector(选择器)是Java NIO中能够检测一到多个NIO通道,并能够知晓通道是否为诸如读写事件做好准备的组件.这样,一个单独的线程可以管理多个channel,从而管理多个网络连接. 传统的 ...
- 51NOD 1222 最小公倍数计数 [莫比乌斯反演 杜教筛]
1222 最小公倍数计数 题意:求有多少数对\((a,b):a<b\)满足\(lcm(a,b) \in [1, n]\) \(n \le 10^{11}\) 卡内存! 枚举\(gcd, \fra ...
- 把页面的Table直接输出到Excel文件中
有个需求是统计的时候,为生成的html表格提供导出功能,但是这样导出Excel不会显示自身的表格 影响美观,但是excel会显示html的css样式,这里可以通过处理行对象的方式进行导出,但是处理起纵 ...
- [Python Study Notes]磁盘信息和IO性能
''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''''' ...
- Java面试题库及答案解析
1.面向对象编程(OOP)有哪些优点? 代码开发模块化,更易维护和修改. 代码复用. 增强代码的可靠性和灵活性. 增加代码的可理解性. 2.面向对象编程有哪些特性? 封装.继承.多态.抽象 封装 封装 ...
- ASP.NET Core的身份认证框架IdentityServer4--(4)添加第三方快捷登录
添加对外部认证的支持 接下来我们将添加对外部认证的支持.这非常简单,因为你真正需要的是一个兼容ASP.NET Core的认证处理程序. ASP.NET Core本身也支持Google,Facebook ...
- 报错信息 The jsp:param action must not be used outside the jsp:include, jsp:forward, or jsp:params elements 的原因及解决办法
如果你的代码是这样的话就会报错 <jsp:forward page="02.jsp"></jsp:forward> <jsp:param value= ...
- ch7复用类
导出类的初始化是从基类开始向下扩展的,先初始化基类,再初始化由基类继承而来的类. 若类B需要类A中的一些甚至全部方法,但类B实际上不是并不是真正的类A,则可以通过代理的方式在B中实现所需要的A的方法, ...
- 用Open SSH生成公钥和私钥(Win)
也可以使用 dsa 加密算法进行加密,命令如下: ssh-keygen -t dsa
- PHP动态编译出现Cannot find autoconf的解决方法
wget http://ftp.gnu.org/gnu/m4/m4-1.4.9.tar.gz tar -zvxf m4-.tar.gz cd m4-/ ./configure && m ...