经常遇到要在一个页面内跳转的需求。
估计用的最多的方法就是
<a href="#myId">跳转</a> <div id="myId">目标</div>
这种跳转很方便，但是在四处都讲用户体验的今天，还是有些可以改进的地方。
如何改进呢。就用到jquery。让其有个移动的效果，从“跳转” 缓缓的滚动到“目标”。
如何实现呢。
技术点：animate，和scrollTop，和offset().top
animate:负责动画效果。
scrollTop():滚动条到顶部的距离。
offset().top : 目标div “#myID”到页面顶部的偏移量。
一个粗糙的示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>单页内滚动</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$("a").click(function(){
//$("body").animate({scrollTop: '300px'}, 1000); //让body滚动条移动300px。
var myh=$("#mubiao").offset().top;
console.log(myh);
$("body").animate({scrollTop:myh+'px'},1000);
})
})
</script>
</head>
<body>
<a href="#mu1biao">跳转到目标</a>
<p>1</p>
<p>13</p>
<p>14</p>
<p>12</p>
<p>14</p>
<p>16</p>
<p>178</p>
<p>18</p>
<p>1</p>
<p>13</p>
<p>14</p>
<p>12</p>
<p>14</p>
<p>16</p>
<p>178</p>
<p>18</p>
<p>1</p>
<p>13</p>
<p>14</p>
<p>12</p>
<p>14</p>
<p>16</p>
<p>178</p>
<p>18</p>
<p>1</p>
<p>13</p>
<p>14</p>
<p>12</p>
<p>14</p>
<p>16</p>
<p>178</p>
<p>18</p>
<p>1</p>
<p>13</p>
<p>14</p>
<p>12</p>
<p>14</p>
<p>16</p>
<p>178</p>
<p>18</p>
<p>1</p>
<p>13</p>
<p>14</p>
<p>12</p>
<p>14</p>
<p>16</p>
<p>178</p>
<p>18</p>
<p id="mubiao">#mubaio</p>
<p>13</p>
<p>14</p>
<p>12</p>
<p>14</p>
<p>16</p>
<p>178</p>
<p>18</p>
<p>1</p>
<p>13</p>
<p>14</p>
<p>12</p>
<p>14</p>
<p>16</p>
<p>178</p>
<p>18</p>
<p>1</p>
<p>13</p>
<p>14</p>
<p>12</p>
<p>14</p>
<p>16</p>
<p>178</p>
<p>18</p>
<p>1</p>
<p>13</p>
<p>14</p>
<p>12</p>
<p>14</p>
<p>16</p>
<p>178</p>
<p>18</p>
<p>1</p>
<p>13</p>
<p>14</p>
<p>12</p>
<p>14</p>
<p>16</p>
<p>178</p>
<p>18</p>
<p>1</p>
<p>13</p>
<p>14</p>
<p>12</p>
<p>14</p>
<p>16</p>
<p>178</p>
<p>18</p>
</body>
</html>