<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="jquery.js"></script> <style type="text/css"> #wra div{ width: 1028px; height: 726px; text-align: center; font-size: 100PX; line-height:726px; } #wra #div1{ background: red; } #wra #div2{ background: oldlace; } #wra #div3{ background: palegreen; } #wrap{ width: 100px; height: 300px; position: fixed; left: 1000px; top: 300px; background: oldlace; } #wrap div{ width:100px ; height: 100px; text-align: center; line-height: 100px; } </style> </head> <body> <div id="wra"> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div> <div id="div4">div4</div> </div> <div id="wrap"> <div >1</div> <div >2</div> <div >3</div> </div> </body> <script type="text/javascript"> $(function(){ $(‘#wrap div‘).click(function(){ $(document).scrollTop($(‘#wra‘).children().eq($(this).index()).offset().top); }) }) </script> </html>
原文：http://www.cnblogs.com/lichunjing/p/7066311.html