<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>锚点</title>
<style>
*{padding:0;margin:0;}
div {
height: 800px;
400px;
border: 2px solid black;
}
h2 {
position: fixed;
margin:50px 500px;
}
a{200px;height:60px;font-size:20px;display:inline-block;line-height:60px;border:0px solid red;text-decoration: none;color:#000;}
a:hover{color:red;}
a:active{color:#000;}
/*
a:link {color:green;} 未被访问的链接
a:visited {color:blue;}已被访问的链接
a:hover {color:gray;}鼠标指针移动到链接上
a:active {color:yellow;}正在被点击的链接
*/
</style>
</head>
<body>
<h2>
<a href="#div1" style="border-bottom:3px solid lime;">to div1</a>
<a href="#div2">to div2</a>
<a href="#div3">to div3</a>
<a id="div1Link">滑动到div1</a>
<a id="div2Link">滑动到div2</a>
<a id="div3Link">滑动到div3</a>
</h2>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$("h2 a").click(function(){
$(this).css('border-bottom','3px solid lime').siblings().css('border-bottom','0px solid red');
})
$(document).ready(function() {
$("h2 #div1Link").click(function() {
$("html, body").animate(
{
scrollTop: $("#div1").offset().top
},
{
duration: 500,easing: "swing"
});
return false;
});
console.log($("#div1").offset().top);
$("h2 #div2Link").click(function() {
$("html, body").animate(
{
scrollTop: $("#div2").offset().top
},
{
duration: 500,easing: "swing"
});
return false;
});
console.log($("#div2").offset().top);
$("h2 #div3Link").click(function() {
$("html, body").animate(
{
scrollTop: $("#div3").offset().top
},
{
duration: 500,easing: "swing"
});
return false;
});
console.log($("#div3").offset().top);
});
</script>
</body>
</html>