jquery实例代码:链接调整平滑滚动效果
http://www.itjxue.com 2015-08-06 22:59 来源:未知 点击次数:
<!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>