我正在使用这些典型位置之一:固定的“滚动到顶部”链接,通过 jquery,当您手动向下滚动时淡入,如果您手动向上滚动则淡出。单击链接时,它会通过 animate-scrollTop 将您带到网站顶部。
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;
});
最佳答案
好吧,我唯一能想到的解决方法是给 anchor 一个 div 包装器,然后应用 position:fixed 和 bottom:10px 到它,而不是 anchor /链接。
新的 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;
});
所以它需要一个包装器。
关于jquery - firefox 和 opera 固定位置有问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14173967/