最简单的一种:
设置a标签的锚点就行啦,但是有个确定链接会更改,不利于刷新
<div class="skip" id="skip">
<h2>目录</h2>
<ul>
<li>
<a href="#toc0" class="aaa">点击文字跳转</a>
<!--herf的值一定要带#号,并且要和相对应要跳转的值一致-->
</li>
</ul>
<div class="chapter" style="margin-top: 850px;">
<a name="toc0" class="aaa1">文字跳转到这里</a>
<!--这里的a标签可以用name也可以用id-->
<p>心情假心情假心情假心情假心情假心情假心情假心情假心情假心情假心情假心情假心情假
心情假心情假心情假心情假心情假心情假心情假心情假心情假心情假心情假心情假</p>
</div>
</div>
第二种方法是根据animate的方法来移动
animate(params, [duration], [easing], [callback])
创建自定义动画,注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left.
例子:
// 在一个动画中同时应用三种类型的效果
$("#go")。click(function(){
$("#block")。animate({
width: "90%",
height: "100%",
fontSize: "10em", //驼峰
borderWidth: 10
}, 1000 );
});
将上面的html中的a标签去掉#toc0
js代码
$(".aaa")。click(function () {
$('html,body')。animate({
scrollTop:$(".aaa1")。offset()。top},{duration:500,easing:'swing'});
return false;
})
以上总结的两种是常用且兼容比较好的,较为简单的
|