各种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(" ...
随机推荐
- Perf工具
前段时间Linux下用nmon监控程序的运行,发现CPU的使用率很高,系统态Sys的比例很高.程序的速度不是很快,怀疑和上面的原因有关. 分别使用perf record,perf report和top ...
- 文件锁FileLock
1.文件锁的定义 FileLock是文件锁,进程锁,用于进程间并发,控制不同程序(JVM)对同一文件的并发访问. FileLock是java 1.4 版本后出现的一个类,它可以通过对一个可写文件(w) ...
- 微信小程序页面跳转的问题(app.json中设置tarBar后wx.redirectTo和wx.navigateTo均不能实现跳转到指定的页面)
1.设置的tabBar代码片段: "tabBar": { "list": [ { "pagePath": "pages/homep ...
- 在控制台进行依赖注入(DI in Console)
首先我们准备两个服务接口 public interface IServiceA { void showConsole(); int GetValue(int val); } public interf ...
- I can do it
If it doesn't challange you ,it won't change you.
- git取消文件跟踪
在使用git的时候,有些文件是不需要上传的,所以就可以修改 .gitignore 例如: 如果是对所有文件都取消跟踪的话,就是 git rm -r -cached . //不删除本地文件 git ...
- linux下简洁优化部署tomcat应用
本文来自我的github pages博客http://galengao.github.io/ 即www.gaohuirong.cn 摘要: 本文是自己根据公司架构部署tomcat方法整理出来的文本 修 ...
- linux下lampp(xampp)安装memcached扩展
原理:根据自己的lampp中的php版本,编译memcache时,引用对应下载的php版本,并安装后的php_config来生成memcache.so文件,再将这个so文件放置到lamppp对应位置, ...
- ASP.NET Core的身份认证框架IdentityServer4--(4)添加第三方快捷登录
添加对外部认证的支持 接下来我们将添加对外部认证的支持.这非常简单,因为你真正需要的是一个兼容ASP.NET Core的认证处理程序. ASP.NET Core本身也支持Google,Facebook ...
- spring core 与 context理解
Spring core是核心层,拥有这BeanFactory这个强大的工厂,是所有bean的管理器: 而spring context是上下文运行环境,基于spring core之上的一个架构, 它之上 ...