各种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中实现方式

  1. <div id="divNode"><!-- contents --></div><!-- 假设一个需要跳转到的节点 -->
  2. <a href="#" onclick="document.getElemetnById(‘divNode‘).scrollIntoView(true);return false;">通过scrollIntoView实现锚点效果</a>
时间: 2024-10-10 23:15:29

各种HTML锚点跳转方式的相关文章

Vue爬坑之旅(八):vue单页面中锚点跳转

一般情况下我们在html中使用锚点时会利用链接方式请求‘#+id名称’,此时会在url后面跟一个#号.但是在单页面中会有路由误判的情况.所以在单页面中锚点可改为参数传递的方式. 一.封装一个外部js:anchor.js //锚点跳转 function goAnchor(selector) { var anchor = this.$el.querySelector(selector);//获取元素 if(anchor) { setTimeout(()=>{//页面没有渲染完成时是无法滚动的,因此设

jsp中几种跳转方式和参数共享

整理了一下jsp入门中的跳转和数据共享问题,写成这篇博文希望对大家有帮助,参考文章列在后面: 常用的跳转方式有以下几种: (1)href超链接标记,属于客户端跳转 (2)使用javascript完成,属于客户端跳转 (3)提交表单完成跳转,属于客户端跳转 (4)使用response对象,属于客户端跳转 (5)使用requestDispatcher类,属于服务器跳转 下面一一来看 (1)href超链接标记 这个比较简单,通常写到a标签里即可,来完成指定位置的动态跳转比较方便 代码:<a href=

URI跳转方式地图导航的代码实践

本文转载至 http://adad184.com/2015/08/11/practice-in-mapview-navigation-with-URI/ 前言 之前介绍了我正在做的是一款定位主打的应用 然后最近我们需要做一个定位导航的功能 能够让用户从当前位置导航到指定目的地(默认以驾车的方式导航) 手机上的导航方式 分应用内导航和应用外导航 应用内导航是指使用地图服务提供的SDK(比如高德,百度等等) 直接将导航功能嵌入到我们自己的APP内部但是这个方案我个人不喜欢 一是接入要一定的时间 二是

微信小程序详解——页面之间的跳转方式【路由】和参数传递

微信小程序拥有web网页和Application共同的特征,我们的页面都不是孤立存在的,而是通过和其他页面进行交互,来共同完成系统的功能.今天我们来研究小程序页面之间的跳转方式. 1.先导 在Android中,我们Activity和Fragment都有栈的概念在里面,微信小程序页面也有栈的概念在里面.微信小程序页面跳转有四种方式: 1.wx.navigateTo(OBJECT): 2.wx.redirectTo(OBJECT): 3.wx.switchTab(OBJECT): 4.wx.navi

jquery 在页面上根据ID定位(jQuery锚点跳转及相关操作) 经典

1.锚点跳转简介 Edit 锚点其实就是可以让页面定位到某个位置上的点.在高度较高的页面中经常见到.比如百度的百科页面,wiki中的page内容. 我知道实现锚点的跳转有两种形式,一种是a标签+name属性:还有一种就是使用标签的id属性.百度百科就是使用a标签的name属性来实现锚点跳转的. 比如: <a href="#2">波轮洗衣机介绍</a> <a name="2"></a> 但是上种方法使用了一个空标签,而且

jQuery写出可调控自定义的平滑滚动效果(锚点跳转动画)

今天朋友,没错,是上次的好基友,在用jQuery.scrollTo.js这个插件的时候总是没反应,而且在函数里console可以输出数据,这点现在仍让我很困惑,难道是scroll版本和我引用的jQUery版本不兼容?我在自己本地搭建了一个小demo也没反应,于是就借助动画写了一个可以自定义滑动的距离和速度调控的demo.供大家参考,欢迎交流更好的办法. 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 &

(转)JSP三种页面跳转方式的比较

使用JSP大约有下列三种跳转方式: 1. response.sendRedirect(); 2. response.setHeader("Location",""); 3. <jsp:forward page="" /> 经过试验得到下面的一些规则: 一. response.sendRedirect() 此语句前不允许有out.flush(),如果有out.flush(),会有异常: java.lang.IllegalStateExc

Android之Activity的几种跳转方式

 1.显示调用方法 Intent intent=new Intent(this,OtherActivity.class);  //方法1 Intent intent2=new Intent(); intent2.setClass(this, OtherActivity.class);//方法2 intent2.setClassName(this, "com.zy.MutiActivity.OtherActivity");  //方法3 此方式可用于打开其它的应用 intent2.set

struts2 的跳转方式

在struts2中有4中跳转方式 1. dispatcher        请求转发(默认),只跳到jsp页面 2. redirect         重定向到jsp 3. redirectAction        重定向到action 4. chain           转发到action 在说这之前,让我们说下请求转发和重定向的概念,如果你已经了解转发和重定向,可以跳过,直接看下面. 转发和重定向 1. 转发是服务器内部之间进行的 重定向是用户重新向服务器发送新的请求 2. 转发地址栏不