html锚点简单使用

最新推荐文章于 2022-01-22 10:00:42 发布

小花皮猪

最新推荐文章于 2022-01-22 10:00:42 发布

阅读量5k

点赞数 1

分类专栏：前端(Web) 文章标签： html5 js jsp html

本文链接：https://blog.csdn.net/weixin_46713508/article/details/117430236

版权

前端(Web) 专栏收录该内容

44 篇文章 5 订阅

订阅专栏

在项目开发中锚点可以丰富客户体验,比如说点击一个菜单定位去页面的某个位置,常见的就是返回顶部等,下面简单介绍下锚点的使用

锚点离不开`<a></a>`标签,简单介绍下`<a></a>`超链接的一些常用例子

1.链接访问地址

<a href="http://www.baidu.com">点我去百度！！！</a>

2.空链接不访问

<a href="#">点我去百度！！！</a>

3.链接访问js函数

<a href="javascript:test();">测试</a>

   function test(){
		alert();
	}

4.链接带参数

<a href="javascript:test('张三');">测试</a>

   function test(name){
		alert(name);
	}

暂时想起来这几种常用的用法,欢迎大家留言评论补充

锚点就是借助<`a></a>`标签超链接的特性基础进行的补充,下面介绍几种实现方式

方法1 同页面用name属性

点击跳转链接:<a href="#menu1">去菜单1</a><br>
被跳转链接:<a name="menu1">菜单1</a>

方法2 同页面用id属性比方法1安全因为id是唯一的

点击跳转链接:<a href="#menu1">去菜单1</a><br>
被跳转链接:<a id="menu2">菜单1</a>

方法3 不同页面使用锚点跳转

跳转页面:<a href="test.html#bottom">去test页面底部</a>
被跳转页面:<a id="bottom">我是test.html的底部</a>

简单的例子(我是用记事本写的代码比较简便)

<html>
<head></head>
<body>
	<a href="test.html#bottom">去test页面底部</a>
	<a name="top">我是顶部</a>
	<a href="#bottom">去底部</a>
	<a href="#menu1">去菜单1</a><br><a href="#menu2">去菜单2</a>
 	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<a name="menu1">菜单1</a>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<a id="menu2">菜单2</a>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<p>❤</p>
	<a id="bottom">我是底部</a>
	<a href="#top">去顶部</a>
</body>
</html>

小花皮猪

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
html锚点简单使用

在项目开发中锚点可以丰富客户体验,比如说点击一个菜单定位去页面的某个位置,常见的就是返回顶部等,下面简单介绍下锚点的使用锚点离不开<a></a>标签,简单介绍下<a></a>超链接的一些常用例子1.链接访问地址<a href="http://www.baidu.com">点我去百度！！！</a>2.空链接不访问<a href="#">点我去百度！！！</a>3.链接访问js函数<a hre
复制链接

扫一扫