火狐和歌劇有固定位置的問題

Question

我正在使用這些典型的位置之一：固定「滾動到頂部」的鏈接，通過jquery，手動向下滾動時淡入，如果手動向後滾動則淡出向上。當鏈接被點擊時，它會將動畫滾動到網站的頂部。

css的問題是，當您點擊opera-or-firefox中的鏈接時，css會從底部切換：10px到頂部：0px，並且除非再次單擊，否則不會出現scrollTop。

如果在樣式表中將其更改爲top：0，則鏈接正常工作。但嘗試底部：10px（或頂部：0以外的任何東西），並點擊它的行爲導致它再次變爲頂部：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; 
    }); 

Answer 1

好吧，我能想到的唯一的解決方法是給錨一個div包裝，並申請 位置：固定和底部：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; 
    }); 

所以它需要的包裝。