页面跳转并定位到锚标记（锚标记平滑移动）

JQuery实现平滑移动

A页面：

 
  
  1. <html> 
  2. <head> 
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  4. <title>A页面</title> 
  5. </head> 
  6. <body> 
  7. <div> 
  8. <a href="b.html?mao=div_b">跳转页面</a> 
  9. </div> 
  10. </body> 
  11. </html> 
 
  
B页面：
 
  
 
  
  1. <html> 
  2. <head> 
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  4. <title>B页面</title> 
  5. <script src="jquery-1.4.2.min.js"type="text/javascript"></script> 
  6. <script type="text/javascript"> 
  7. //根据参数名获得该参数 pname等于想要的参数名 
  8. function getParam(pname) { 
  9.     var params = location.search.substr(1); // 获取参数 平且去掉？ 
  10.     var ArrParam = params.split('&'); 
  11.     if (ArrParam.length == 1) { 
  12.         //只有一个参数的情况 
  13.         return params.split('=')[1]; 
  14.     } 
  15.     else { 
  16.          //多个参数参数的情况 
  17.         for (var i = 0; i < ArrParam.length; i++) { 
  18.             if (ArrParam[i].split('=')[0] == pname) { 
  19.                 return ArrParam[i].split('=')[1]; 
  20.             } 
  21.         } 
  22.     } 
  23. }  
  24. $(function() { 
  25.     var mao = $("#" + getParam("div_b")); //获得锚点 
  26.     if (mao.length > 0) {//判断对象是否存在 
  27.         var pos = mao.offset().top; 
  28.         var poshigh = mao.height(); 
  29.         $("html,body").animate({ scrollTop: pos-poshigh-30 }, 3000); 
  30.     } 
  31. });  
  32. </script> 
  33. </head> 
  34. <body> 
  35. <div> 
  36. <!-- 中间页面部分 --> 
  37. </div> 
  38. <div id="div_b"> 
  39.  <!-- 定位部分 --> 
  40. </div> 
  41. </body> 
  42. </html>