Firefox 和 Opera 定位问题答案

【问题标题】：firefox and opera having trouble with position fixedFirefox 和 Opera 定位问题
【发布时间】：2013-01-06 01:48:05
【问题描述】：

我正在使用这些典型位置之一：固定的“滚动到顶部”链接，通过 jquery，当您手动向下滚动时淡入，如果您手动向上滚动则淡出。单击该链接时，它会以动画方式滚动顶部将您带到网站顶部。

css问题是，当你点击opera-or-firefox中的链接时，css会从bottom:10px切换到top:0px，除非你再次点击，否则不会出现scrollTop。

如果您在样式表中将其更改为 top:0，则链接可以正常工作。但是尝试bottom:10px（或top:0以外的任何东西），点击它会导致它再次变为top:0。就好像 FF & O 不允许除了 top:0px 之外的任何东西。

有什么想法吗？

这是 CSS -

a#scrollup{
display:none;
width:51px;
height:51px;
-moz-opacity:.7;
opacity:.7;
zoom:1;
filter:alpha(opacity=70);
position:fixed;
overflow:hidden;
text-indent:100%;
white-space: nowrap;
z-index:1001;
bottom:10px;
right:10px;
background: url('images/ui.totop.png') no-repeat;
-webkit-transition:opacity 0.8s ease-in-out;
   -moz-transition:opacity 0.8s ease-in-out;
    -ms-transition:opacity 0.8s ease-in-out;
     -o-transition:opacity 0.8s ease-in-out;
        transition:opacity 0.8s ease-in-out;
}

a#scrollup:hover{
-moz-opacity:.9;
opacity:.9;
filter:alpha(opacity=90);
}
a#scrollup:active{bottom:8px}

这是脚本 -

    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('a#scrollup').fadeIn();
        } else {
            $('a#scrollup').hide('fast');  
        }
    }); 

    $('a#scrollup').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600, 'easeInExpo');
        return false;
    });

【问题讨论】：

标签： jquery css

【解决方案1】：

好吧，我能想到的唯一解决方法是给锚一个 div 包装器，然后应用 position:fixed 和 bottom:10px 到它，而不是到锚点/链接。

新的 CSS：

div#scrollup {
display:none;
position:fixed;
z-index:1001;
bottom:10px;
right:10px;
}

div#scrollup a{
overflow:hidden;
text-indent:100%;
white-space: nowrap;
width:51px;
height:51px;
-moz-opacity:.7;
opacity:.7;
zoom:1;
filter:alpha(opacity=70);
background: url('images/ui.totop.png') no-repeat;
-webkit-transition:opacity 0.8s ease-in-out;
   -moz-transition:opacity 0.8s ease-in-out;
    -ms-transition:opacity 0.8s ease-in-out;
     -o-transition:opacity 0.8s ease-in-out;
        transition:opacity 0.8s ease-in-out;
}

div#scrollup a:hover{
-moz-opacity:.9;
opacity:.9;
filter:alpha(opacity=90);
}
div#scrollup a:active{bottom:8px}

修改过的jquery：

     $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('div#scrollup').fadeIn();
        } else {
            $('div#scrollup').hide('fast');  
        }
    }); 

    $('div#scrollup a').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600, 'easeInExpo');
        return false;
    });

所以它需要一个包装器。

【讨论】：