CSS中如何做到导航点击,滚动就滑动到对应的区域 例如导航上的产品，点击就滑动到当前页面的产品区域了。

html-css022

CSS中如何做到导航点击,滚动就滑动到对应的区域 例如导航上的产品，点击就滑动到当前页面的产品区域了。,第1张

比如我现在要滑动到此p标签区域，可先给p标签加上一个id，

导航处的a标签利用它的href属性，如<a href="#scroll"></a>

<p id="scroll"></p>

可以做一个animation，举一个例子，让一个元素在某一个范围之内，左距离和上距离同时改变。但是，弧线要让两个距离改变速度变化不一致，所以最好一个元素改变上方距离（可以是top也可是margin-top），里面嵌入一个元素改变左边距离。例如，假如你要让横轴均匀变化，纵轴不均匀变化，轨迹为⌒形，可以左变化为{from{margin-left:0px}to{margin-left:200px}}，运动方式设为linear，然后上下变化可以{from{margin-top:100px}50%{margin-top:0px}to{margin-top:100px}}，运动方式设为ease-in-out。由于时间仓促我没有具体实验过，而且表达可能不太清楚，请原谅。