我正在这个名为http://martindue.dk/mmd3x9x/的网站上工作,并且可以滚动到不配合的顶级脚本。我已经在许多其他网站上使用了该脚本,并且效果很好,但是在这个特定的网站上,即使我位于网站的顶部,div#to-top仍会重新出现,为什么不在顶部时它会正确淡出吗?
我的代码如下所示(在HTML的body-tag之后插入#to-top):
Java脚本
jQuery(document).ready(function() {
$toTop = jQuery("#to-top");
$toTop.hide();
jQuery(window).scroll(function() {
if(jQuery(this).scrollTop() != 0) {
$toTop.fadeIn();
} else {
$toTop.fadeOut();
}
});
$toTop.click(function() {
jQuery("body, html").animate({ scrollTop : 0 }, 500);
return false;
});
});
的CSS
#to-top {
background: url("img/to-top.png") center top no-repeat;
background-size: 100%;
width: 50px;
height: 50px;
position: fixed;
bottom: 60px;
right: 60px;
cursor: pointer;
/*display:none;*/
/*opacity: 0.0;*/
}
我创建了这个小提琴,在这里工作正常:http://jsfiddle.net/2Rubp/
最佳答案
我知道这不是js,但在这种情况下,您仅使用衰落,因此CSS可以解决问题:
#to-top {
background: url("img/to-top.png") center top no-repeat;
background-size: 100%;
width: 50px;
height: 50px;
position: fixed;
bottom: 60px;
right: 60px;
cursor: pointer;
**-webkit-transition: all 0.5s linear;**
display: none;
opacity: 0.0;
}
注意:这是适用于Chrome浏览器的兼容性
http://www.w3schools.com/css/css3_transitions.asp