关闭边栏(ESC)打开边栏(ESC)

目 录

我们知道html有锚点定位的效果,那么如何实现平滑的定位效果呢?例子中的二个图片可以用高度比较大的图,效果明显些:

<script type=”text/javascript” src=”http://code.hs-cn.com/jquery/jquery-1.7.1.min.js”></script>

<div id=”top” class=”append_box mb20″>
平滑跳转到底部:<a href=”#bottom” class=”smooth”>滑到底部</a>
</div>
<div id=”appendBox” class=”append_box”>
<img width=”950″ height=”931″ src=”” /><br />
<img width=”950″ height=”1000″ src=”” />
</div>
<div id=”bottom” class=”append_box mb20″>
平滑回到顶部:<a href=”#top” class=”smooth”>回到顶部链接</a>
</div>
<script>
$(“.smooth”).click(function(){
var href = $(this).attr(“href”);
var pos = $(href).offset().top;
$(“html,body”).animate({scrollTop: pos}, 1000);
return false;
});
</script>

技术解答:

class=”smooth”:我们自己定义的一个class名称,目的是js调用该标签

href=”#top”:top是要定位的标签ID名称

$(“html,body”).animate({scrollTop: pos}, 1000):1000 是滑动的时间,我们可以自己调整