HTML做的网页如何使当前页面跳转到另一页面锚点处，在线等！！_安全

比如现在有t1html和t2html两个页面，t1页面中需要设置超链接跳转到t2页面中的锚点a1位置，则需要按如下步骤进行设置：

1、t1页面中设置超链接href属性。

<!DOCTYPE html>

<html>

<head>

<style>

html,body{margin:0;padding:0;background-color:#ccc;}

anchor{display:block;padding:5px 10px;background-color:#aaa;}

</style>

</head>

<body>

</body>

</html>

2、t2页面中设置锚点元素的ID为a1。

<!DOCTYPE html>

<html>

<head>

<style>

html,body{margin:0;padding:0;background-color:#ccc;}

anchor{display:block;padding:5px 10px;background-color:#aaa;}

placeholder{height:800px;padding:5px;}

</style>

</head>

<body>

<div class="placeholder">占位div1</div>

<div class="placeholder">占位div2</div>

</body>

</html>

3、浏览器中打开t1页面（以Chrome浏览器为例，其他浏览器 *** 作一样）。

4、点击“跳转到t2页面a1”，Chrome浏览器会新开一个标签页打开t2页面，此时锚点a1在浏览器可视范围内并且位于页面的顶端。这样，外部锚点链接就设置成功了。

方法如下：

首先，在 HTML 文档中对锚进行命名（创建一个书签）：<a name="tips">下面</a>

然后，在同一个文档中创建指向该锚的链接：<a href="#tips">到下面</a>

name 属性规定锚（anchor）的名称。

可以使用 name 属性创建 HTML 页面中的书签。

书签不会以任何特殊方式显示。

当使用命名锚（named anchors）时，可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样就无需不停地滚动页面来寻找需要的信息了。

提示：当点击“到下面”后，焦点就会跳到”下面“处，如果想让效果明显，可以在上面代码片断之间加上<br>

当a使用name属性时，<a>就是一个锚点，锚点的作用是：如果你的网页很长的话，你可以使用锚点跳到页面的某一部分，例如：
<a href="#here">点击这里转到我的博客</a>

<a name="here">我的博客</a>
当点击上面链接时就可直接将网页滚动到加入相应锚点的"here"地方。
注意：在一些浏览器，如IE、Firefox中，可以使用ID代替name，但这并不所有的浏览器都支持的。

在网页中经常用到锚点，特别是在比较长的页面中锚点的使用会增加用户体验，现在php中文网介绍html 锚点三种实现方法
1）在同一页面中
<a name="add"></a> 或者 <a id="add"></a> （ps：用id兼容性好些）
<a href="#add">跳转到add</a>
2）在不同页面中，锚点定位在ahtml中，从另外一个页面的链接跳转到这个锚点
<a href="ahtml#add">跳转到aadd</a>
3）点击链接触发js事件，同时跳转到锚点，有两种处理方式：
第一种：
<a href="#add" onclick="add()">触发add函数并跳转到add锚点</a>
第二种：
<p id="pNode"></p>
<a href="#" onclick="documentgetElemetnById('pNode')scrollIntoView(true);return false;">通过scrollIntoView实现锚点效果</a>

scrollIntoView()的用法
scrollIntoView 是一个与页面（容器）滚动相关的API（官方解释），该API只有boolean类型的参数能得到良好的支持（firefox 36+都支持），所以在这里只讨论参数Boolean类型的情况
调用方法为 elementscrollIntoView() 参数默认为true。

参数为true时调用该函数，页面（或容器）发生滚动，使element的顶部与视图（容器）顶部对齐；

参数为false时，使element的底部与视图（容器）底部对齐。

TIPS：页面（容器）可滚动时才有用！

锚点--是网页的超链接中的一种，也叫做命名锚点，通过name来定位。可以实现在同一页页面中进行链接，很常用，它的英文名称是anchor，也是用a标签来链接的。它的作用是链接同一个页面的某一个章节。

1、首先打开一个HTML页面，不同的软件有不同的打开方式，下面是用Adobe Dreamweaver软件来打开一个页面的。

2、基本代码如下所示。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 10 Transitional//EN" ">

<head>

<meta >

<title>无标题文档</title>

</head>

<body>

</body>

</html>

3、在body里面填写如下的代码。

<body>

</body>

4、锚点的格式代码

5、运行结果如下所示：点击段落2会立马跳转到段落2中。

6、完成效果图。

左边页面的链接是有target的,指向另一个框架,这样点击就会在另一个框架打开了,而另一个页面是带有锚点的,连接后边加#锚点名就可以跳过去了
contenthtml
<a href="连接地址#锚点名" target="showframe">
<frame src="/example/html/linkhtml" name="showframe">注意这个name和连接的target一样

欢迎分享，转载请注明来源：内存溢出

原文地址: https://outofmemory.cn/yw/13361315.html

HTML做的网页如何使当前页面跳转到另一页面锚点处，在线等！！

发表评论

评论列表（0条）

HTML做的网页 如何使当前页面跳转到另一页面锚点处，在线等！！

发表评论

评论列表（0条）

HTML做的网页如何使当前页面跳转到另一页面锚点处，在线等！！