锚点使用总结

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_33214833/article/details/70946764

纯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>
阅读更多

没有更多推荐了,返回首页