一个简单返回顶端的jquery插件

Js代码:

View Code
(function ($) {
    $.fn.gotop = function (options) {

        var settings = $.extend({
            'content': 980,
            'bottom': 30,
            'margin': "none",
            'position': "right",
            'scrollTop': 100,
            'duration': 700
        }, options);

        var win = $(window);
        var top = this;

        //is there some place for my return to the top button?
        function hasPlace() {
            var place = true;
            if (settings.margin == "none") {
                if (win.width() < (settings.content + (top.width() * 2) + 4)) place = false;
            }
            else {
                if (win.width() < (settings.content + ((top.width() + settings.right) * 2) + 4)) place = false;
            }
            return place;
        }

        //Put our return to top button at his place
        function placeTop() {
            var pos = (((win.width() - settings.content) / 2) - top.width()) / 2;
            if (settings.position == "left" || settings.position == "l") top.css({ "left": pos + "px" });
            else top.css({ "right": pos + "px" });
        }

        //Can we show this button?
        function showTop() {
            if (win.scrollTop() > settings.scrollTop) {
                top.fadeIn();
                if ($.browser.msie && ($.browser.version == "6.0")) {
                    var thisTop = win.scrollTop() + win.height() - top.height()- settings.bottom;
                    top.css("top", thisTop + "px");
                }
            }
            else top.fadeOut();
        }

        if (!hasPlace()) this.hide();
        if (settings.margin == "none") placeTop();
        else if (settings.position == "left" || settings.position == "l") top.css({ "left": settings.margin + "px" });
        else top.css({ "right": settings.margin + "px" });
        showTop();

        //RESIZE
        win.resize(function () {
            if (hasPlace()) top.fadeIn();
            else top.fadeOut();

            if (settings.margin == "none") placeTop();
        });

        //SCROLL
        win.scroll(function () {
            showTop();
        });

        if ($.browser.msie && ($.browser.version == "6.0")) {
            top.css({ "position": "absolute", "cursor": "pointer" });
        } else {
            top.css({ "position": "fixed", "cursor": "pointer", "bottom": settings.bottom + "px" });
        }

        return top
        .click(function () {
            $('body,html').animate({ scrollTop: 0 }, settings.duration);
        });

    };
})(jQuery);

调用:

View Code
<script type="text/javascript">
    $(function () {
        $('.gotop').gotop({});
    });
</script>
<div class="gotop"><img title="回到顶部" src="go-top.gif" alt="Top"/></div>
posted on 2012-04-18 18:18  lambert_li  阅读(1266)  评论(0编辑  收藏  举报