<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>锚点</title> </head> <body> <style>.botton div{ cursor:pointer; float:left; }</style> <script type="text/javascript" src="tools/jquery-1.9.0.js"></script> <div class="botton" style="width:1000px; margin:0px auto; padding:3px; border:#000 5px solid; position:fixed; top:0px; left:200px; z-index:11 "> <div style="width:100px; height:20px; background:#909;" οnclick="maodian('c909')"></div> <div style="width:100px; height:20px; background:#F00;" οnclick="maodian('cF00')"></div> <div style="width:100px; height:20px; background:#0F6;" οnclick="maodian('c0F6')"></div> <div style="width:100px; height:20px; background:#F90;" οnclick="maodian('cF90')"></div> <div style="width:100px; height:20px; background:#F90;" οnclick="maodian('',100)">回顶部</div> </div> <div id="c909" style="border:5px solid #909; height:2000px; position:relative;">1</div> <div id="cF00" style="border:5px solid #F00; height:2000px; position:relative;">2</div> <div id="c0F6" style="border:5px solid #0F6; height:2000px; position:relative;">3</div> <div id="cF90" style="border:5px solid #F90; height:2000px; position:relative;">4</div> <script>function maodian(id,time){ time = time?time:500; var _id = document.getElementById(id); if(_id != null && _id != 'underfind'){ $('body,html').animate({ scrollTop:$('#'+id).offset().top, },time); }else{ $('body,html').animate({ scrollTop:0, },time); } }</script> </body> </html>