js 平滑定位

<script type="text/javascript">

             

            function intval(v){

                v = parseInt(v);

                return isNaN(v) ? 0 : v;

            } // ?取元素信息   

            function getPos(e){

                var l = 0;

                var t = 0;

                var w = intval(e.style.width);

                var h = intval(e.style.height);

                var wb = e.offsetWidth;

                var hb = e.offsetHeight;

                while (e.offsetParent) {

                    l += e.offsetLeft + (e.currentStyle ? intval(e.currentStyle.borderLeftWidth) : 0);

                    t += e.offsetTop + (e.currentStyle ? intval(e.currentStyle.borderTopWidth) : 0);

                    e = e.offsetParent;

                }

                l += e.offsetLeft + (e.currentStyle ? intval(e.currentStyle.borderLeftWidth) : 0);

                t += e.offsetTop + (e.currentStyle ? intval(e.currentStyle.borderTopWidth) : 0);

                return {

                    x: l,

                    y: t,

                    w: w,

                    h: h,

                    wb: wb,

                    hb: hb

                };

            } // ?取??条信息   

            function getScroll(){

                var t, l, w, h;

                if (document.documentElement && document.documentElement.scrollTop) {

                    t = document.documentElement.scrollTop;

                    l = document.documentElement.scrollLeft;

                    w = document.documentElement.scrollWidth;

                    h = document.documentElement.scrollHeight;

                }

                else

                    if (document.body) {

                        t = document.body.scrollTop;

                        l = document.body.scrollLeft;

                        w = document.body.scrollWidth;

                        h = document.body.scrollHeight;

                    }

                return {

                    t: t,

                    l: l,

                    w: w,

                    h: h

                };

            } // ?点(Anchor)?平滑跳?   

            function scroller(el, duration){

                if (typeof el != 'object') {

                    el = document.getElementById(el);

                }

                if (!el)

                    return;

                var z = this;

                z.el = el;

                z.p = getPos(el);

                z.s = getScroll();

                z.clear = function(){

                    window.clearInterval(z.timer);

                    z.timer = null

                };

                z.t = (new Date).getTime();

                z.step = function(){

                    var t = (new Date).getTime();

                    var p = (t - z.t) / duration;

                    if (t >= duration + z.t) {

                        z.clear();

                        window.setTimeout(function(){

                            z.scroll(z.p.y, z.p.x)

                        }, 13);

                    }

                    else {

                        st = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (z.p.y - z.s.t) + z.s.t;

                        sl = ((-Math.cos(p * Math.PI) / 2) + 0.5) * (z.p.x - z.s.l) + z.s.l;

                        z.scroll(st, sl);

                    }

                };

                z.scroll = function(t, l){

                    window.scrollTo(l, t)

                };

                z.timer = window.setInterval(function(){

                    z.step();

                }, 13);

            }

        </script>

 <div class="test">

            <a name="header_1" id="header_1"></a>

            <strong onclick="javascript:scroller('header_4', 800);">header_1 --> header_4</strong>

            <p>

            </p>

        </div>

        <div class="test">

            <a name="header_2" id="header_2"></a>

            <strong onclick="javascript:scroller('header_5', 800);">header_2 --> header_5</strong>

            <p>

            </p>

        </div>

 

 

 

另外一种方式是使用jquery比较简单一些!

我们知道html有锚点定位的效果，那么如何实现平滑的定位效果呢？下面由68ecshop的技术来为您详细解答



<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="http://www.dubai.com/images/upload/Image/201407210943470ffuoj.jpg" /><br />

    <img width="950" height="1000" src="http://www.dubai.com/images/upload/Image/20140721094432t9j0kt.jpg" />

</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 是滑动的时间，我们可以自己调整

 刷新页面之后平滑定位到指定位置

$("html, body").scrollTop(0).animate({scrollTop: $(".top-20").offset().top});