javascript 页面加载时显示的粘性“返回顶部”按钮，然后向下滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22361901/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sticky "back to top" button showing on page load, before scrolling down
提问by Will Ryan
I followed a tutorial to get a sticky "back to top" button that would appear once you scroll down. For some reason it's displaying when you're at the top of the page after the page first loads. If you scroll down, then all the way back up, it disappears (as it should). But initially it isn't behaving properly. Any idea?
我按照教程获得了一个粘性的“返回顶部”按钮，一旦向下滚动就会出现。出于某种原因，当您在页面首次加载后位于页面顶部时，它会显示。如果向下滚动，然后一直向上滚动，它就会消失（应该如此）。但最初它的行为不正常。任何的想法？
Here's the live page I'm using it on, you can see it in the bottom right corner here: http://willryan.us
这是我正在使用的实时页面，您可以在右下角看到它：http: //willryan.us
HTML
HTML
<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
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;
}
回答by ntgCleaner
Change your HTML from
更改您的 HTML
<a href="#" class="go-top" style="display: inline;">Back to top</a>
to
到
<a href="#" class="go-top" style="display: none;">Back to top</a>
This will initially hide your button until you scroll.
这将最初隐藏您的按钮，直到您滚动。
回答by Alex Mcp
It's displaying because you haven't fired a scroll event yet to make that logic get run to hide/show it
它正在显示是因为您还没有触发滚动事件以使该逻辑运行以隐藏/显示它
<script>
$(document).ready(function() {
function checkPosition() {
if ($(this).scrollTop() > 200) {
$('.go-top').fadeIn(500);
} else {
$('.go-top').fadeOut(300);
}
}
// Show or hide the sticky footer button
$(window).scroll(checkPosition);
// Animate the scroll to top
$('.go-top').click(function(event) {
event.preventDefault();
$('html, body').animate({scrollTop: 0}, 300);
})
checkPosition();
});
</script>
This new refactor will fire checkPositionat least once on page load, to make sure the button is faded out. An alternative solution would be to set display: none;in the CSS on the element, so it's hidden by default, then only shown by the javascript later
这个新的重构将checkPosition在页面加载时至少触发一次，以确保按钮淡出。另一种解决方案是display: none;在元素的 CSS 中设置，因此默认情况下它是隐藏的，然后仅由 javascript 显示
回答by Will Ryan
I did as user ntgCleaner said and change the "display:inline" in the html to "display:none" and it seems to work. Thanks!
我按照用户 ntgCleaner 所说的做了，将 html 中的“display:inline”更改为“display:none”，它似乎有效。谢谢！
