Commit 12686c13 authored by onny's avatar onny
Browse files

implement scroll top button

parent 9b922191
......@@ -165,6 +165,34 @@ table th {
min-width: 120px;
}
.scrollTop {
position: fixed;
right: 30px;
bottom: 30px;
background-color: white;
width: 55px;
height: 53px;
border-radius: 5px;
border: 1px solid #d6d6d6;
box-shadow: 2px;
display: none;
box-shadow: 0px 3px 10px 0px #8b8b8b;
cursor: pointer;
}
.scrollTop i {
font-size: 30px;
color: #535353;
}
.scrollTop a {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
@media (max-width: 1240px) {
header > div, main > div, footer > div {
max-width: 1000px;
......
......@@ -155,3 +155,12 @@ var demo = new Vue({
};
}
});
window.addEventListener("scroll", function(event) {
scrollTop = document.getElementsByClassName('scrollTop')[0];
if (this.scrollY > 0) {
scrollTop.classList.add('showFlex');
} else {
scrollTop.classList.remove('showFlex');
};
}, false);
......@@ -76,12 +76,12 @@ document.addEventListener("DOMContentLoaded", function() {
if (event.target.closest('.lang')) {
document.getElementById("menu-lang").classList.toggle("show");
document.getElementsByClassName("lang")[0].classList.toggle("active");
arrowIcon = document.getElementsByClassName('ion-ios-arrow-down')[0];
arrowIcon = document.querySelector('.lang .ion-ios-arrow-down');
if (arrowIcon) {
arrowIcon.classList.remove('ion-ios-arrow-down');
arrowIcon.classList.add('ion-ios-arrow-up');
} else {
arrowIcon = document.getElementsByClassName('ion-ios-arrow-up')[0];
arrowIcon = document.querySelector('.lang .ion-ios-arrow-up');
arrowIcon.classList.remove('ion-ios-arrow-up');
arrowIcon.classList.add('ion-ios-arrow-down');
}
......@@ -98,7 +98,7 @@ document.addEventListener("DOMContentLoaded", function() {
openDropdown.classList.remove('show');
}
}
arrowIcon = document.getElementsByClassName('ion-ios-arrow-up')[0];
arrowIcon = document.querySelector('.lang .ion-ios-arrow-up');
if (arrowIcon) {
arrowIcon.classList.remove('ion-ios-arrow-up');
arrowIcon.classList.add('ion-ios-arrow-down');
......
......@@ -164,6 +164,9 @@
</div>
</div>
</footer>
<div class="scrollTop">
<a href=#><i class="icon ion-ios-arrow-up"></i></a>
</div>
</content>
<script type="text/javascript" src="{% static 'js/vue-2.6.10.min.js' %}"></script>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment