我正在尝试实现一个“返回顶部”链接,该链接会在用户向下滚动页面一定量后淡入我的页面。
我注意到在我的某些页面上,“返回顶部”链接会在页面上闪烁,然后再自行隐藏,但在其他页面上则不会。为了找出“链接闪烁”的原因,我创建了一个 JS fiddle 供您查看我的编码,并希望找到导致不一致的原因。 JS fiddle 本身似乎工作正常,但这可能只是因为它在 fiddle 中。是否可以添加一行代码来确保链接在加载时隐藏?
感谢您抽出宝贵时间查看此内容。非常感谢。
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 隐藏按钮,你就可以删除这一行。
关于javascript - jQuery 褪色 "back to top"链接。页面加载链接可见性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16945749/