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