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([
'js/main.js', 'js/main.js',
'js/header-shrink.js', 'js/header-shrink.js',
'js/toggle-mode.js', 'js/toggle-mode.js'
'js/scroll-to-top.js'
]) %> ]) %>
<% if (theme.back2top.enable) { %>
<%- js('js/scroll-to-top.js') %>
<% } %>
<% if (is_post()) { %> <% if (is_post()) { %>
<% if (theme.codeblock.copy_button.enable) { %> <% if (theme.codeblock.copy_button.enable) { %>

View File

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

View File

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

View File

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

View File

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

View File

@ -58,12 +58,16 @@ $component-interspace = 30px;
.sidebar-tools { .sidebar-tools {
position: fixed; position: fixed;
top: $header-height + $component-interspace; 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(); transition();
} }
.scroll-to-top { /*.scroll-to-top {
display: none; display: none;
position: fixed; position: fixed;
right: ((100% - $main-content-width) / 4); 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 { .page-bottom {
@ -111,16 +153,28 @@ $component-interspace = 30px;
} }
.sidebar-tools { .sidebar-tools {
left: 2% !important; if (hexo-config('side-tools.position') == left) {
transform-origin: right top; left: 2% !important;
transform-origin: left top;
} else {
right: 2% !important;
transform-origin: right top;
}
transform: scale(0.8); transform: scale(0.8);
} }
//.sidebar-toc { //.sidebar-toc {
// right: 2% !important; // right: 2% !important;
//} //}
//.scroll-to-top { .scroll-to-top {
// right: 2% !important; 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 menuBarDom = document.querySelector('.menu-bar');
const windowMaskDom = document.querySelector('.window-mask'); const windowMaskDom = document.querySelector('.window-mask');
const scrollPercentDom = document.querySelector('.scroll-percent'); const scrollPercentDom = document.querySelector('.scroll-percent');
const scrollToTopDom = document.querySelector('.scroll-to-top');
let isHeaderShrink = false; let isHeaderShrink = false;
const headerHeight = headerDom.getBoundingClientRect().height; const headerHeight = headerDom.getBoundingClientRect().height;
@ -19,21 +18,6 @@ window.addEventListener('scroll', function (_e) {
headerDom.classList.remove('header-wrapper-shrink'); headerDom.classList.remove('header-wrapper-shrink');
pageTemplateDom.classList.remove('page-top-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', () => { (function () {
let scrollTopTimer = setInterval(function () { const scrollToTopDom = document.querySelector('.scroll-to-top');
let top = document.body.scrollTop || document.documentElement.scrollTop;
let speed = top / 3; scrollToTopDom.addEventListener('click', () => {
if (document.body.scrollTop !== 0) { let scrollTopTimer = setInterval(function () {
document.body.scrollTop -= speed; 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 { } else {
document.documentElement.scrollTop -= speed; scrollToTopDom.style.display = 'block';
scrollPercentDom.innerHTML = parseInt(percent) < 10 ? `0${percent}` : percent;
} }
if (top === 0) { });
clearInterval(scrollTopTimer);
} })();
}, 30);
});