feat: 增加回到顶部功能
This commit is contained in:
parent
ff70fe886d
commit
26db2a61a5
|
@ -1 +1 @@
|
|||
<%- js(['js/main.js', 'js/common.js', 'js/toggle-mode.js']) %>
|
||||
<%- js(['js/main.js', 'js/common.js', 'js/toggle-mode.js', 'js/scroll-to-top.js']) %>
|
|
@ -9,5 +9,10 @@
|
|||
<li class="mode-toggle">
|
||||
<i class="fa fa-moon-o"></i>
|
||||
</li>
|
||||
<li class="scroll-to-top-value">
|
||||
</li>
|
||||
<li class="scroll-to-top">
|
||||
<i class="fa fa-arrow-up"></i>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
|
|
@ -3,60 +3,102 @@
|
|||
|
||||
#vcomments {
|
||||
|
||||
.vheader {
|
||||
.vwrap {
|
||||
|
||||
.vinput {
|
||||
border: 1px solid var(--third-text-color);
|
||||
|
||||
&:focus {
|
||||
border-bottom: 1px solid $primary-color !important;
|
||||
.vheader {
|
||||
|
||||
.vinput {
|
||||
|
||||
color: var(--normal-text-color);
|
||||
border-color: var(--third-text-color);
|
||||
|
||||
&:focus {
|
||||
border-bottom: 1px solid var(--primary-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.vcontrol {
|
||||
.col-20 a {
|
||||
display: none;
|
||||
}
|
||||
.vedit {
|
||||
|
||||
.col-80 {
|
||||
button.vsubmit {
|
||||
background: transparent !important;
|
||||
color: var(--normal-text-color); !important;
|
||||
border: 1px solid var(--normal-text-color); !important;
|
||||
.veditor {
|
||||
color: var(--normal-text-color);
|
||||
}
|
||||
|
||||
|
||||
&:hover {
|
||||
color: $primary-color !important;
|
||||
border: 1px solid $primary-color !important;
|
||||
.vctrl {
|
||||
span {
|
||||
color: var(--normal-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.vcontrol {
|
||||
.col-20 a {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.col-80 {
|
||||
button.vsubmit {
|
||||
background: transparent !important;
|
||||
color: var(--normal-text-color) !important;
|
||||
border: 1px solid var(--normal-text-color) !important;
|
||||
|
||||
&:hover {
|
||||
color: var(--primary-color) !important;
|
||||
border: 1px solid var(--primary-color) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
.vcount {
|
||||
color: var(--normal-text-color);
|
||||
|
||||
.vnum {
|
||||
color: var(--second-text-color);
|
||||
}
|
||||
}
|
||||
|
||||
.vlist {
|
||||
.vcard {
|
||||
.vhead {
|
||||
.vnick {
|
||||
|
||||
&::before {
|
||||
background: $primary-color !important;
|
||||
background: var(--primary-color) !important;
|
||||
}
|
||||
color: $primary-color;
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.vsys {
|
||||
color: var(--normal-text-color);
|
||||
background: var(--border-color) !important;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.vcontent {
|
||||
P {
|
||||
color: var(--normal-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.info {
|
||||
.txt-right {
|
||||
display none
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -4,24 +4,24 @@ $code-block {
|
|||
overflow: auto;
|
||||
margin: 20px 0;
|
||||
padding: 0;
|
||||
font-size 1em;
|
||||
font-size 0.95em;
|
||||
color: var(--highlight-foreground);
|
||||
background: var(--highlight-background);
|
||||
line-height: 1.6em;
|
||||
line-height: 1.5em;
|
||||
transition: all 0.5s ease;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border-radius: 5px;
|
||||
background: rgba(0, 0, 0, 0.2)
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
//&::-webkit-scrollbar {
|
||||
// height: 8px;
|
||||
//}
|
||||
//
|
||||
//&::-webkit-scrollbar-thumb {
|
||||
// border-radius: 5px;
|
||||
// background: rgba(0, 0, 0, 0.2)
|
||||
//}
|
||||
//
|
||||
//&::-webkit-scrollbar-track {
|
||||
// background: transparent;
|
||||
//}
|
||||
|
||||
}
|
||||
|
||||
|
|
|
@ -25,7 +25,7 @@ $z-index-6 = 1006;
|
|||
// color
|
||||
// ===============================
|
||||
// normal mode color
|
||||
$primary-color = #30a103; // 主题颜色
|
||||
$primary-color = #a13b17; // 主题颜色
|
||||
$background-color = #fcfcfc; // 背景颜色
|
||||
$normal-text-color = #515061; // 通用文本颜色(默认字体颜色)
|
||||
$first-text-color = darken($normal-text-color, 20%); // 第一文本颜色
|
||||
|
|
|
@ -6,9 +6,7 @@ const windowMask = document.querySelector('.window-mask');
|
|||
const headerHeight = header.getBoundingClientRect().height;
|
||||
|
||||
window.addEventListener('scroll', function (_e) {
|
||||
|
||||
const scrollTop = Math.max(document.body.scrollTop, document.documentElement.scrollTop);
|
||||
|
||||
const scrollTop = document.body.scrollHeight || document.documentElement.scrollHeight;
|
||||
if (!isHeaderShrink && scrollTop > headerHeight) {
|
||||
isHeaderShrink = true;
|
||||
header.classList.add('header-wrapper-shrink');
|
||||
|
@ -27,3 +25,5 @@ menuBar.addEventListener('click', function (_e) {
|
|||
windowMask.addEventListener('click', function (_e) {
|
||||
header.classList.toggle('header-drawer-show');
|
||||
});
|
||||
|
||||
|
||||
|
|
|
@ -0,0 +1,28 @@
|
|||
const scrollToTop = document.querySelector('.scroll-to-top');
|
||||
const scrollToTopValue = document.querySelector('.scroll-to-top-value');
|
||||
scrollToTop.addEventListener('click', () => {
|
||||
let scrollTopTimer = setInterval(function () {
|
||||
let top = document.body.scrollTop || document.documentElement.scrollTop;
|
||||
let speed = top / 5;
|
||||
if (document.body.scrollTop !== 0) {
|
||||
document.body.scrollTop -= speed;
|
||||
} else {
|
||||
document.documentElement.scrollTop -= speed;
|
||||
}
|
||||
if (top === 0) {
|
||||
clearInterval(scrollTopTimer);
|
||||
}
|
||||
}, 30);
|
||||
});
|
||||
|
||||
|
||||
const scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
|
||||
const clientHeight = window.innerHeight || document.documentElement.clientHeight;
|
||||
window.addEventListener('scroll', function (_e) {
|
||||
var validH = scrollHeight - clientHeight;
|
||||
var scrollH = document.body.scrollTop || document.documentElement.scrollTop;
|
||||
scrollToTopValue.innerHTML = Math.round(scrollH / validH * 100).toFixed(0) + '%';
|
||||
|
||||
});
|
||||
|
||||
|
Loading…
Reference in New Issue