diff --git a/config/html/css/main.css b/config/html/css/main.css index 95cfd3a..be31b37 100644 --- a/config/html/css/main.css +++ b/config/html/css/main.css @@ -833,15 +833,18 @@ input:checked + .slider:before { transform: rotate(180deg); } -#btn-scroll-bottom:hover svg, -#btn-scroll-top:hover svg { - stroke: var(--color-link); -} -#btn-scroll-bottom:focus svg, -#btn-scroll-top:focus svg { - stroke: #aaa; +@media only screen and (min-width: 1024px) { + #btn-scroll-bottom:hover svg, + #btn-scroll-top:hover svg { + stroke: var(--color-link); + } + #btn-scroll-bottom:focus svg, + #btn-scroll-top:focus svg { + stroke: #aaa; + } } + /*#sidebar-right:hover #btn-scroll-bottom,*/ #scroll-buttons:hover #btn-scroll-top { display:flex !important; diff --git a/src/scripts/scroll.js b/src/scripts/scroll.js index 09168c2..6ca7a41 100644 --- a/src/scripts/scroll.js +++ b/src/scripts/scroll.js @@ -10,15 +10,24 @@ function mainScrollBtns() { // container const scrollBtnContainer = document.querySelector("#scroll-buttons"); scrollBtnContainer.style.display = "flex"; + /* trigger on scroll */ + let newTimeout = null; // up const btnScrollTop = document.querySelector("#btn-scroll-top"); //btnScrollTop.style.display = "flex"; btnScrollTop.addEventListener("click", (ev) => { + ev.preventDefault(); window.scrollTo(0, 0); + if (newTimeout) clearTimeout(newTimeout); history.pushState( "", document.title, window.location.pathname + window.location.search ); + // wait until scroll to top (very brute, should listen to event!!) + setTimeout(() => { + btnScrollTop.style.display = 'none'; + }, 200); + }); // down /*const btnScrollBottom = document.querySelector("#lbar-buttons #btn-scroll-bottom");*/ @@ -27,9 +36,6 @@ function mainScrollBtns() { /*window.scrollTo(0, document.body.scrollHeight);*/ /*});*/ - /* trigger on scroll */ - let newTimeout = null; - window.addEventListener('scroll', e => { let scrollTop = window.pageYOffset || document.documentElement.scrollTop; if (scrollTop > LAST_SCROLL_TOP) {