<!DOCTYPE html> <html> <head lang="zh"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8" /> <meta content="yes" name="apple-mobile-web-app-capable"/> <meta content="yes" name="apple-touch-fullscreen"/> <meta content="telephone=no" name="format-detection"/> <meta content="black" name="apple-mobile-web-app-status-bar-style"> <meta content="#ffffff" name="msapplication-TileColor" /> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" /> <title>采销商品基本信息</title> <link rel="stylesheet" href="css/index.css"/> </head> <body> <div class="pox"> 佛得角粉丝卡<span>jkladja</span>放到那送到哪 </div> <div class="pox-1"> 佛得角粉丝卡<span>jkladja</span>放到那送到哪<input type="text" name="" value="hello"> </div> <p>1</p><p>1</p><p class="button1">1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p class="button2">2</p> <p>1</p><p class="button3">3</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> <p>1</p><p>1</p><p class="button4">4</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> <div class="my-button"> <ul> <li name="button1">按钮1</li> <li name="button2">按钮2</li> <li name="button3">按钮3</li> <li name="button4">按钮4</li> </ul> </div> <script type="text/javascript" src="./js/jquery.js"></script> <script type="text/javascript"> jQuery.fn.scrollTop=function(speed){ var targetOffset=$(this).offset().top; console.log(targetOffset); $("html,body").stop().animate({scrollTop:targetOffset},speed); return this; } $(".my-button ul li").click(function(){ var thisname='.'+$(this).attr("name");//构建class的名字eg：.name； $(thisname).scrollTop(500); return false; }); </script> </body> </html>
点击按钮1234分别对应的回到button1/button2/button3/button4的位置！