Javascript教程：链接调整平滑滚动效果案例
<!DOCTYPE html>
<head>
<title>jquery实现锚点跳转平滑滚动效果</title>
<style type="text/css">
body{padding:0; margin:0;}
a,a:visited{text-decoration:none; color:#000; cursor:pointer;}
a:hover{text-decoration:underline;}
#control{position:fixed; top:100px; left:100px;}
#control a{font-weight:bold; color:#fff;}
#top{width:100%; height:800px; background:red;}
#middle{width:100%; height:800px; background:blue;}
#bottom{width:100%; height:800px; background:green;}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#control a").click(function(){
var rel=$(this).attr("rel");
var pos=$(rel).offset().top;
$("html, body").animate({scrollTop:pos},1000);
})
})
</script>
</head>
<body>
<div id="control">
<a rel="#top">头部</a><br />
<a rel="#middle">中部</a><br />
<a rel="#bottom">尾部</a>
<div id="top">
<div id="middle">
<div id="bottom">
</body>
</html>
| Word教程网 | Excel教程网 | Dreamweaver教程网 | Fireworks教程网 | PPT教程网 | FLASH教程网 | PS教程网 |
| HTML教程网 | DIV CSS教程网 | FLASH AS教程网 | ACCESS教程网 | SQL SERVER教程网 | C语言教程网 | JAVASCRIPT教程网 |
| ASP教程网 | ASP.NET教程网 | CorelDraw教程网 |
QQ：2693987339(点击联系)购买教程光盘
:
