锚点使用总结

来源：互联网发布：windows相对路径写法编辑：程序博客网时间：2024/05/29 21:30

纯a标签的锚点

<html><head><title>锚点练习</title></head><body>***<a href="#content" >内容</a><a href="#theme" >主题</a><a href="#text" >文本</a>***<div style="height:800px; border:1px red solid"></div><div style="height:800px; border:1px red solid" id="content">   <div style="height:40px;background-color:#c0c0c0;text-align:center;">内容</div>   <div style="height:760px;border:1px blue solid"></div> </div><div style="height:800px; border:1px red solid" id="theme">    <div style="height:40px;background-color:#c0c0c0;text-align:center;">主题</div>    <div style="height:760px;border:1px blue solid"></div>  </div><div style="height:800px; border:1px red solid" id="text">    <div style="height:40px;background-color:#c0c0c0;text-align:center;">文本</div>    <div style="height:760px;border:1px blue solid"></div></div></body></html>

使用js实现

<html><head><title>锚点练习</title></head><body><a onclick="javascript:document.getElementById('content').scrollIntoView()">内容</a><a onclick="javascript:document.getElementById('theme').scrollIntoView()">主题</a><a onclick="javascript:document.getElementById('text').scrollIntoView()">文本</a><div style="height:800px; border:1px red solid"></div><div style="height:800px; border:1px red solid" id="content">    <div style="height:40px;background-color:#c0c0c0;text-align:center;">内容</div>    <div style="height:760px;border:1px blue solid"></div></div><div style="height:800px; border:1px red solid" id="theme">    <div style="height:40px;background-color:#c0c0c0;text-align:center;">主题</div>    <div style="height:760px;border:1px blue solid"></div></div><div style="height:800px; border:1px red solid" id="text">    <div style="height:40px;background-color:#c0c0c0;text-align:center;">文本</div>    <div style="height:760px;border:1px blue solid"></div>  </div></body></html>

使用jquery

<html><head><title>锚点练习</title><script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script><script type="text/javascript">$(document).ready(function() {$("#contentLink").click(function() {$("html, body").animate({scrollTop: $("#content").offset().top }, {duration: 500,easing: "swing"});return false;});$("#themeLink").click(function() {$("html, body").animate({scrollTop: $("#theme").offset().top }, {duration: 500,easing: "swing"});return false;});$("#textLink").click(function() {$("html, body").animate({scrollTop: $("#text").offset().top }, {duration: 500,easing: "swing"});return false;});});</script></head><body><a id="contentLink" href="">内容</a><a id="themeLink" href="">主题</a><a id="textLink" href="">文本</a><div style="height:800px; border:1px red solid"></div><div style="height:800px; border:1px red solid" id="content">    <div style="height:40px;background-color:#c0c0c0;text-align:center;">内容</div>    <div style="height:760px;border:1px blue solid"></div></div><div style="height:800px; border:1px red solid" id="theme">    <div style="height:40px;background-color:#c0c0c0;text-align:center;">主题</div>    <div style="height:760px;border:1px blue solid"></div></div><div style="height:800px; border:1px red solid" id="text">    <div style="height:40px;background-color:#c0c0c0;text-align:center;">文本</div>    <div style="height:760px;border:1px blue solid"></div>  </div></body></html>

0 0