我正在尝试实现一个"back to top"链接,一旦用户向下滚动页面一定数量,该链接就会淡出我的页面。
我注意到在我的一些页面上,"back to top"链接在隐藏自己之前会在页面上闪烁,但在其他页面上没有。在试图追踪"链接闪光"的原因,我已经创建了一个JS小提琴为您查看我的编码,并希望找到是什么原因导致不一致。JS小提琴本身似乎工作正常,但这可能只是因为它在小提琴。是否可能有一行代码,我可以添加,以确保链接是隐藏在加载?
谢谢你花时间看这个。非常感谢。
http://jsfiddle.net/uLUWV/HTML<div class="container">
Test Content
</div>
<p id="back-top"><a href="#top"><span>Go To Top</span></a></p>
CSS #back-top {position: fixed; display:none; bottom:10px; left:10px; width:83px;}
#back-top a {width: 83px; display: block;}
#back-top span {width: 83px; height: 94px; display: block; background-color:red;}
.container {height:4000px;}
jQuery $(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 500) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
发现问题了。
你需要把你的CSS #back-top{display : none}
.
一个是存在的,但是它被你的媒体查询所覆盖。您需要一个更具体的选择器,仅用于显示。
在skin.css
中添加这一行,它应该会纠正错误:
p#back-top{display : none}
检查您的媒体查询是否仍然有效。如果没有,你也必须在你的查询中更具体。
现在,你的按钮被.hide()
隐藏。因此,一旦你可以通过CSS隐藏按钮,你就可以删除这一行。
我测试了下面的代码,没有任何问题
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 500) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>
<style type="text/css">
#back-top {position: fixed; display:none; bottom:10px; left:10px; width:83px;}
#back-top span {width: 83px; height: 94px; display: block; background-color:red;}
.container {height:4000px;}
#back-top a {width: 83px; display: block;color: white;}
#back-top a:active {
color: white;
}
</style>
</head>
<body>
<div class="container">
Test Content
</div>
<p id="back-top"><a href="#top"><span>Go To Top</span></a></p>
</body>
</html>
这段代码可以在你的浏览器中工作吗?