html利用锚点实现定位代码实例

最新推荐文章于 2023-03-20 20:29:33 发布

weixin_34112030

最新推荐文章于 2023-03-20 20:29:33 发布

阅读量780

点赞数

原文链接：http://www.cnblogs.com/good10001/p/4744156.html

版权

本章节介绍介绍一下如何利用锚点实现定位，使用锚点实现定位是html固有的功能，当然比较简单，也实现了基本的功能，但是功能相对简单一些，如果想要实现平滑的定位可以参阅jquery实现的点击页面动画方式平滑定位到某元素代码一章节。下面通过代码实例介绍一下html是如何实现锚点定位的。

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>http://www.100sucai.com</title>
<style type="text/css">  
.a{
  width:60px;
  height:20px;
  background:#F90;
  font-size:12px;
  text-align:center;
  line-height:20px;
  position:fixed;
  right:0px;
  top:50px;
  cursor:pointer;
  display:block;
  text-decoration:none;
}
#thediv{
  width:100%;
  height:50px;
  background:#CCC;
  margin-top:100px;
}
</style>  
</head>  
<body style="height:1000px;">  
<a class="a" href="#thediv">点击定位</a>
<div id="thediv">
<li><a href="http://www.100sucai.com/web/jquerytexiao/daohangcaidan/" title="导航菜单">导航菜单</a></li>
<li><a href="http://www.100sucai.com/web/jquerytexiao/xuanxiangka/" title="table选项卡">table选项卡</a></li>
</div>
</body>  
</html>

以上代码实现了锚点定位效果，代码非常的简单，将链接a的href属性值设置为要定位元素的id属性值，但是前面要加#。

转载于:https://www.cnblogs.com/good10001/p/4744156.html

weixin_34112030

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html利用锚点实现定位代码实例

本章节介绍介绍一下如何利用锚点实现定位，使用锚点实现定位是html固有的功能，当然比较简单，也实现了基本的功能，但是功能相对简单一些，如果想要实现平滑的定位可以参阅jquery实现的点击页面动画方式平滑定位到某元素代码一章节。下面通过代码实例介绍一下html是如何实现锚点定位的。代码如下:<!DOCTYPE html><html><head&gt...
复制链接

扫一扫