Skip to content

Commit

Permalink
refactor: replace external scrolltotop solution with own
Browse files Browse the repository at this point in the history
Closes: #365
  • Loading branch information
b1rger committed Nov 14, 2023
1 parent 0548faa commit 964a581
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 4 deletions.
8 changes: 4 additions & 4 deletions apis_core/apis_metainfo/templates/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -52,9 +52,6 @@

{% if PROJECT_CSS %}<link rel="stylesheet" href="{{ PROJECT_CSS }}?rnd=1" rel="stylesheet" />{% endif %}

<link rel="stylesheet"
href="{% shared_url %}apis/libraries/scroll-to-top/css/ap-scroll-top.min.css" />

{% block scriptHeader %}{% endblock %}

</head>
Expand Down Expand Up @@ -250,7 +247,6 @@
{% include "partials/bootstrap4_js.html" %}
<script type="text/javascript"
src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<script src="{% shared_url %}apis/libraries/scroll-to-top/js/ap-scroll-top.min.js"></script>
{% endblock %}

{% block scripts2 %}
Expand All @@ -269,5 +265,9 @@
</div>
{% endblock modal %}

{% block backtotopbtn %}
{% include "partials/backtotopbtn.html" %}
{% endblock backtotopbtn %}

</body>
</html>
41 changes: 41 additions & 0 deletions apis_core/core/templates/partials/backtotopbtn.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<style>
#btn-back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
opacity: 0.5;
}
</style>
<button type="button"
class="btn btn-danger btn-floating btn-lg"
id="btn-back-to-top">
<span>&uarr;</span>
</button>
<script>
//Get the button
let mybutton = document.getElementById("btn-back-to-top");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function () {
scrollFunction();
};

function scrollFunction() {
if (
document.body.scrollTop > 20 ||
document.documentElement.scrollTop > 20
) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
mybutton.addEventListener("click", backToTop);

function backToTop() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>

0 comments on commit 964a581

Please sign in to comment.