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>
相关文章
精彩导读
热门资讯
关注我们
