refactor: fetch out 'back to top' module & modified its style
This commit is contained in:
parent
88a886d5ad
commit
e39b371695
|
@ -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) { %>
|
||||
|
|
|
@ -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>
|
||||
<% } %>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -37,7 +37,6 @@ the-transition-ease-out() {
|
|||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.title-hover-animation {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
@ -64,4 +63,4 @@ the-transition-ease-out() {
|
|||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
|
@ -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);
|
||||
}
|
||||
|
||||
}
|
|
@ -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 + '%';
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
|
||||
})();
|
Loading…
Reference in New Issue