refactor: fetch out 'back to top' module & modified its style

This commit is contained in:
XPoet 2020-04-25 21:45:45 +08:00
parent 88a886d5ad
commit e39b371695
8 changed files with 117 additions and 50 deletions

View File

@ -1,10 +1,13 @@
<%- js([
'js/main.js',
'js/header-shrink.js',
'js/toggle-mode.js',
'js/scroll-to-top.js'
'js/toggle-mode.js'
]) %>
<% if (theme.back2top.enable) { %>
<%- js('js/scroll-to-top.js') %>
<% } %>
<% if (is_post()) { %>
<% if (theme.codeblock.copy_button.enable) { %>

View File

@ -11,6 +11,7 @@
</li>
<% if (theme.local_search.enable) { %>
<li class="rss">
<!-- TODO -->
<a href="<%= config.feed.path %>" target="_blank"><i class="fa fa-rss"></i></a>
</li>
<% } %>

View File

@ -39,11 +39,16 @@
<%- partial('_partial/tools') %>
</div>
<div class="scroll-to-top">
<span class="scroll-percent"></span>
<button><i class="fa fa-caret-up"></i></button>
</div>
<% if (theme.back2top.enable) { %>
<div class="scroll-to-top">
<ul>
<li>
<!--<i class="fa fa-caret-up"></i>-->
<span class="scroll-percent"></span>
</li>
</ul>
</div>
<% } %>
</div>
<div class="page-bottom">

View File

@ -26,6 +26,13 @@ $li-margin-bottom = 10px;
border: 1px solid var(--third-text-color);
}
&:hover {
transition();
color: var(--background-color);
background: var(--primary-color);
}
&.rss {
padding: 0;
@ -47,12 +54,6 @@ $li-margin-bottom = 10px;
}
&:hover {
transition();
color: var(--background-color);
background: var(--primary-color);
}
&:last-child {
margin-bottom: 0;
}

View File

@ -37,7 +37,6 @@ the-transition-ease-out() {
transform: translateY(0);
}
}
.title-hover-animation {
display: inline-block;
position: relative;

View File

@ -58,12 +58,16 @@ $component-interspace = 30px;
.sidebar-tools {
position: fixed;
top: $header-height + $component-interspace;
left: ((100% - $main-content-width) / 4);
if (hexo-config('side-tools.position') == left) {
left: ((100% - $main-content-width) / 4);
} else {
right: ((100% - $main-content-width) / 4);
}
transition();
}
.scroll-to-top {
/*.scroll-to-top {
display: none;
position: fixed;
right: ((100% - $main-content-width) / 4);
@ -82,6 +86,44 @@ $component-interspace = 30px;
}
}
}
*/
.scroll-to-top {
display: none;
position: fixed;
if (hexo-config('back2top.position') == left) {
left: ((100% - $main-content-width) / 4);
} else {
right: ((100% - $main-content-width) / 4);
}
bottom: $component-interspace;
li {
cursor: pointer;
padding: 2px;
width: 32px;
height: 30px;
border-radius: 5px;
font-size: 0.9em;
display: flex;
align-items: center;
justify-content: center;
background: var(--background-color);
if (hexo-config('magic.enable') == true) {
magic-style(1.1);
} else {
border: 1px solid var(--third-text-color);
}
&:hover {
transition();
color: var(--background-color);
background: var(--primary-color);
}
}
}
}
.page-bottom {
@ -111,16 +153,28 @@ $component-interspace = 30px;
}
.sidebar-tools {
left: 2% !important;
transform-origin: right top;
if (hexo-config('side-tools.position') == left) {
left: 2% !important;
transform-origin: left top;
} else {
right: 2% !important;
transform-origin: right top;
}
transform: scale(0.8);
}
//.sidebar-toc {
// right: 2% !important;
//}
//.scroll-to-top {
// right: 2% !important;
//}
.scroll-to-top {
if (hexo-config('back2top.position') == left) {
left: 2% !important;
transform-origin: left bottom;
} else {
right: 2% !important;
transform-origin: right bottom;
}
transform: scale(0.8);
}
}

View File

@ -3,7 +3,6 @@ const headerDom = document.querySelector('.header-wrapper');
const menuBarDom = document.querySelector('.menu-bar');
const windowMaskDom = document.querySelector('.window-mask');
const scrollPercentDom = document.querySelector('.scroll-percent');
const scrollToTopDom = document.querySelector('.scroll-to-top');
let isHeaderShrink = false;
const headerHeight = headerDom.getBoundingClientRect().height;
@ -19,21 +18,6 @@ window.addEventListener('scroll', function (_e) {
headerDom.classList.remove('header-wrapper-shrink');
pageTemplateDom.classList.remove('page-top-shrink');
}
// show scroll percent
const scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
const clientHeight = window.innerHeight || document.documentElement.clientHeight;
const percent = Math.round(scrollTop / (scrollHeight - clientHeight) * 100).toFixed(0);
if (percent === '0') {
scrollToTopDom.style.display = 'none';
} else {
scrollToTopDom.style.display = 'block';
scrollPercentDom.innerHTML = percent + '%';
}
});

View File

@ -1,14 +1,34 @@
scrollToTopDom.addEventListener('click', () => {
let scrollTopTimer = setInterval(function () {
let top = document.body.scrollTop || document.documentElement.scrollTop;
let speed = top / 3;
if (document.body.scrollTop !== 0) {
document.body.scrollTop -= speed;
(function () {
const scrollToTopDom = document.querySelector('.scroll-to-top');
scrollToTopDom.addEventListener('click', () => {
let scrollTopTimer = setInterval(function () {
let top = document.body.scrollTop || document.documentElement.scrollTop;
let speed = top / 2;
if (document.body.scrollTop !== 0) {
document.body.scrollTop -= speed;
} else {
document.documentElement.scrollTop -= speed;
}
if (top === 0) {
clearInterval(scrollTopTimer);
}
}, 30);
});
window.addEventListener('scroll', function (_e) {
// back to top
// show scroll percent
const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
const scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
const clientHeight = window.innerHeight || document.documentElement.clientHeight;
const percent = Math.round(scrollTop / (scrollHeight - clientHeight) * 100).toFixed(0);
if (percent === '0') {
scrollToTopDom.style.display = 'none';
} else {
document.documentElement.scrollTop -= speed;
scrollToTopDom.style.display = 'block';
scrollPercentDom.innerHTML = parseInt(percent) < 10 ? `0${percent}` : percent;
}
if (top === 0) {
clearInterval(scrollTopTimer);
}
}, 30);
});
});
})();