jquery实例代码:链接调整平滑滚动效果

最新推荐文章于 2024-09-25 15:53:29 发布

huangwenhua5000

最新推荐文章于 2024-09-25 15:53:29 发布

阅读量513

点赞数

分类专栏： AJAX/JQuery/JavaScript/XML/Web

AJAX/JQuery/JavaScript/XML/Web 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<!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>