我按照教程添加了一个"回到顶部"的粘滞按钮,它会在页面向下滚动时出现。但是奇怪的是,在页面首次加载后,当您处于页面顶部时,它就会显示出来。如果您向下滚动,然后再完全向上滚动,它将消失(应该如此)。但最初它的行为不正常。有任何想法吗?
这是我正在使用它的实时页面,您可以在这里看到它位于右下角:http://willryan.us
这是我正在使用它的实时页面,您可以在这里看到它位于右下角:http://willryan.us
<a href="#" class="go-top" style="display: inline;">Back to top</a>
<script>
$(document).ready(function() {
// Show or hide the sticky footer button
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$('.go-top').fadeIn(500);
} else {
$('.go-top').fadeOut(300);
}
});
// Animate the scroll to top
$('.go-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 300);
})
});
</script>
CSS
.go-top {
position: fixed;
bottom: 0.75em;
right: 0.5em;
text-decoration: none;
color: white;
background-color: rgba(0, 0, 0, 0.25);
font-size: 12px;
padding: 10px;
display: none;
margin: 0;
}
.go-top:hover {
background-color: rgba(0, 0, 0, 0.6);
color: white;
text-decoration: none;
}
display:inline
属性的元素,请将其更改为display:none
,这样在首次加载时它就不会出现。 - ntgCleanerdisplay:inline
- 要么使你的样式表说display:none !important;
,要么将你的内联样式更改为相同的内容。 - ntgCleaner