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

来源：互联网发布：战略纵深知乎编辑：程序博客网时间：2024/05/17 23:43

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