Closed
Description
I've been using pandas for a while and am just now starting to contribute. One of the things that has bugged me for a while is that in the docs there is no scroll to top button. Some of the pages get pretty long, and I'm usually without a Home button on my laptop, so I end up stuck (exaggeration) deep in the docs.
I looked into templating with Sphinx and discovered that it's pretty easy to add this feature to all pages. Under pandas/doc/_templates, I created a file layout.html (see code below) that adds a small bit of HTML, CSS, and JS which create a scroll to top button. I kept it to a basic implementation, but feel free if anyone has any suggestions about style or the breakpoint for viewing the button.
pandas/doc/_templates/layout.html
{% extends "!layout.html" %} {%- block footer %}
<style type="text/css">
.scrollToTop {
text-align: center;
font-weight: bold;
position: fixed;
bottom: 60px;
right: 40px;
display: none;
}
</style>
<a href="#" class="scrollToTop">Scroll To Top</a>
<script type="text/javascript">
$(document).ready(function() {
//Check to see if the window is top if not then display button
$(window).scroll(function() {
if ($(this).scrollTop() > 200) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
//Click event to scroll to top
$('.scrollToTop').click(function() {
$('html, body').animate({
scrollTop: 0
}, 500);
return false;
});
});
</script>
{% endblock %}