关闭边栏(ESC)打开边栏(ESC)
目 录
我们知道html有锚点定位的效果，那么如何实现平滑的定位效果呢？例子中的二个图片可以用高度比较大的图，效果明显些：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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 是滑动的时间，我们可以自己调整
滑动的时候，如果顶部是有固定导航的，可以在pos这个变量中减去。
这个可以与回到顶部或滚到底部的效果合并使用、会很酷，就像本站右侧的向上与向下滚动。