我按照教程来获得一个粘性的“返回顶部”按钮,一旦向下滚动就会出现.出于某种原因,在页面首次加载后,当您位于页面顶部时,它会显示.如果向下滚动,然后一直向上,它就会消失(应该如此).但最初它表现不佳.任何的想法?
这是我正在使用它的实时页面,你可以在右下角看到它:http://willryan.us
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
.go-top { position: fixed; bottom: 0.75em; right: 0.5em; text-decoration: none; color: white; background-color: rgba(0,0.25); font-size: 12px; padding: 10px; display: none; margin: 0; } .go-top:hover { background-color: rgba(0,0.6); color: white; text-decoration: none; }
解决方法
更改您的HTML
<a href="#" class="go-top" style="display: inline;">Back to top</a>
至
<a href="#" class="go-top" style="display: none;">Back to top</a>
这将首先隐藏您的按钮,直到您滚动.