一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

jQuery固定DIV实现返回顶部效果代码

时间:2014-11-03 编辑:简简单单 来源:一聚教程网

效果代码如下

 

jQuery固定DIV实现返回顶部效果代码

htm代码(这一段最好放在html中最下面)

 代码如下 复制代码

js代码

 代码如下 复制代码

$.fn.extend({
    goToTop: function (b) {
        var b = $.extend({
            pageWidth: 940,
            pageWGap: 10,
            pageHGap: 30,
            startline: 20,
            duration: 200,
            showBtntime: 100
        }, b);
        var e = $(this);
        var f = $(window);
        var d = (window.opera) ? (document.compatMode == "CSS1Compat" ? $("html") : $("body")) : $("html,body");
        var c = !($.browser.msie && parseFloat($.browser.version) < 7);
        var a = false;
        e.css({
            opacity: 0,
            position: (c ? "fixed" : "absolute")
        });
        e.click(function (g) {
            d.stop().animate({
                scrollTop: 0
            }, b.duration);
            e.blur();
            g.preventDefault();
            g.stopPropagation()
        });
        f.bind("scroll resize", function (i) {
            var h;
            if (f.width() > b.pageHGap * 2 + b.pageWidth) {
                h = (f.width() - b.pageWidth) / 2 + b.pageWidth + b.pageWGap
            } else {
                h = f.width() - b.pageWGap - e.width()
            }
            var j = f.height() - e.height() - b.pageHGap;
            j = c ? j : f.scrollTop() + j;
            e.css({
                left: h + "px",
                top: j + "px"
            });
            var g = (f.scrollTop() >= b.startline) ? true : false;
            if (g && !a) {
                e.stop().animate({
                    opacity: 1
                }, b.showBtntime);
                a = true
            } else {
                if (a && !g) {
                    e.stop().animate({
                        opacity: 0
                    }, b.showBtntime);
                    a = false
                }
            }
        })
    }
});

热门栏目