学步园

1.js事件

<a class="back-top" href="#top" onclick="window.scrollTo(0,0);return false;" title="返回顶部"style="position:fixed;right:0px;">返回顶部</a>

也可采用如下写法

<a href="javascript:;" class="new_floating_top new_floating_top2" id="return_top"style="position:fixed;right:0px;">回顶部</a>

2.利用锚点

<a class="back-top" href="#" title="返回顶部">返回顶部</a>

3.返回顶部

    //< html

    <a href="#top" title="回到顶部" class="goTop" id="php-go-top" style="">回到顶部</a>

    //< css

  /*回顶部*/
.goTop{padding:44px 0 6px; position:fixed; *position:absolute; bottom:60px; height:24px; width:62px; text-align:center; line-height:24px; font-size:12px; background:url(../img/public/elems.png) no-repeat 0 -88px; color:#524d4d; position:fixed; _position:absolute; right:20px;}
.goTop:hover{background-position:-63px -88px; color:#dd7f1b; text-decoration:none;}

    //< js
    var _goTop = function(id) {
        //< 完美解决ie6不支持position:fixed的bug
        var _isIE6 = !-[-1,] && !window.XMLHttpRequest;
        if(_isIE6) {
            var domTxt = '(document).documentElement';
            var ie6CSS = 'position:absolute;left:expression(eval(' + domTxt + '.scrollLeft+' + domTxt + '.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0)-(parseInt(this.currentStyle.right,10)||20));top:expression(eval('
+ domTxt + '.scrollTop+' + domTxt + '.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0))-(parseInt(this.currentStyle.bottom,10)||60))';
            //< 修正IE6振动bug
            $('body').css({'background-image':'url(about:blank)','background-attachment':'fixed'});
            //< ie6下模拟支持position:fixed
            $(id).attr('style', ie6CSS + ';display:none;');
        }

        var state = {
            isvisible : false,  //< 回到顶部 初始状态
            shouldvisible : false  //< 回到顶部 目标状态
        };

        var toggleControl = function() {
            var scrollTop = $(window).scrollTop();
            state.shouldvisible = (scrollTop > 0) ? true : false;
            if(state.shouldvisible && !state.isvisible) {
                $(id).show();
                state.isvisible = true;
            } else if(state.shouldvisible == false && state.isvisible) {
                $(id).hide();
                state.isvisible = false;
            }
        };

        var $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body');
        $(id).click(function() {
            $body.animate({scrollTop: 0}, {duration: 500});
            return false;
        });
        toggleControl();
        $(window).bind('scroll resize', function(e) {
            /*var scrollTop = $(window).scrollTop();
            var windowHeight = $(document).height();
            if(scrollTop > windowHeight / 2) {
                alert(scrollTop + ' ' + windowHeight);
                alert(scrollTop + '>' + windowHeight / 2);
            }*/
            toggleControl();
        });
    };

    _goTop('#php-go-top');