zhangdocs 1.1.27 → 1.1.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -52,6 +52,13 @@
|
|
|
52
52
|
</div>
|
|
53
53
|
</div>
|
|
54
54
|
|
|
55
|
+
<!-- 滚动到底部按钮 -->
|
|
56
|
+
<button class="scroll-to-bottom" id="scroll-to-bottom" aria-label="滚动到底部" title="滚动到底部">
|
|
57
|
+
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
58
|
+
<path d="M6 9l6 6 6-6"></path>
|
|
59
|
+
</svg>
|
|
60
|
+
</button>
|
|
61
|
+
|
|
55
62
|
<!-- Token输入弹窗 -->
|
|
56
63
|
<div id="token-modal"
|
|
57
64
|
style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 9999; display: none; justify-content: center; align-items: center;">
|
|
@@ -449,5 +456,68 @@ style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:
|
|
|
449
456
|
}
|
|
450
457
|
});
|
|
451
458
|
})();
|
|
459
|
+
|
|
460
|
+
// 滚动到底部功能
|
|
461
|
+
(function() {
|
|
462
|
+
var scrollToBottomBtn = document.getElementById('scroll-to-bottom');
|
|
463
|
+
if (!scrollToBottomBtn) {
|
|
464
|
+
return;
|
|
465
|
+
}
|
|
466
|
+
|
|
467
|
+
// 检查是否在页面底部
|
|
468
|
+
function isAtBottom() {
|
|
469
|
+
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
|
470
|
+
var scrollHeight = document.documentElement.scrollHeight;
|
|
471
|
+
var clientHeight = document.documentElement.clientHeight;
|
|
472
|
+
// 允许5px的误差
|
|
473
|
+
return scrollHeight - scrollTop - clientHeight <= 5;
|
|
474
|
+
}
|
|
475
|
+
|
|
476
|
+
// 显示/隐藏按钮
|
|
477
|
+
function toggleButton() {
|
|
478
|
+
if (isAtBottom()) {
|
|
479
|
+
scrollToBottomBtn.classList.remove('show');
|
|
480
|
+
} else {
|
|
481
|
+
scrollToBottomBtn.classList.add('show');
|
|
482
|
+
}
|
|
483
|
+
}
|
|
484
|
+
|
|
485
|
+
// 滚动到底部
|
|
486
|
+
function scrollToBottom() {
|
|
487
|
+
window.scrollTo({
|
|
488
|
+
top: document.documentElement.scrollHeight,
|
|
489
|
+
behavior: 'smooth'
|
|
490
|
+
});
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
// 绑定点击事件
|
|
494
|
+
scrollToBottomBtn.addEventListener('click', function(e) {
|
|
495
|
+
e.preventDefault();
|
|
496
|
+
scrollToBottom();
|
|
497
|
+
});
|
|
498
|
+
|
|
499
|
+
// 监听滚动事件
|
|
500
|
+
var scrollTimer = null;
|
|
501
|
+
window.addEventListener('scroll', function() {
|
|
502
|
+
// 使用节流,减少频繁检查
|
|
503
|
+
if (scrollTimer) {
|
|
504
|
+
clearTimeout(scrollTimer);
|
|
505
|
+
}
|
|
506
|
+
scrollTimer = setTimeout(toggleButton, 100);
|
|
507
|
+
}, { passive: true });
|
|
508
|
+
|
|
509
|
+
// 初始检查
|
|
510
|
+
setTimeout(toggleButton, 500);
|
|
511
|
+
|
|
512
|
+
// 监听内容变化(处理动态加载的内容)
|
|
513
|
+
var observer = new MutationObserver(function() {
|
|
514
|
+
setTimeout(toggleButton, 100);
|
|
515
|
+
});
|
|
516
|
+
|
|
517
|
+
observer.observe(document.body, {
|
|
518
|
+
childList: true,
|
|
519
|
+
subtree: true
|
|
520
|
+
});
|
|
521
|
+
})();
|
|
452
522
|
</script>
|
|
453
523
|
<% include footer.ejs %>
|
|
@@ -512,4 +512,53 @@ table
|
|
|
512
512
|
|
|
513
513
|
.nav-button
|
|
514
514
|
max-width: 100%
|
|
515
|
-
width: 100%
|
|
515
|
+
width: 100%
|
|
516
|
+
|
|
517
|
+
// 滚动到底部按钮
|
|
518
|
+
.scroll-to-bottom
|
|
519
|
+
position: fixed
|
|
520
|
+
bottom: 30px
|
|
521
|
+
right: 30px
|
|
522
|
+
width: 48px
|
|
523
|
+
height: 48px
|
|
524
|
+
background: #fff
|
|
525
|
+
border: 1px solid $border-color
|
|
526
|
+
border-radius: 50%
|
|
527
|
+
cursor: pointer
|
|
528
|
+
z-index: 999
|
|
529
|
+
display: none
|
|
530
|
+
align-items: center
|
|
531
|
+
justify-content: center
|
|
532
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15)
|
|
533
|
+
transition: all 0.3s ease
|
|
534
|
+
color: $text-color
|
|
535
|
+
padding: 0
|
|
536
|
+
-webkit-tap-highlight-color: transparent
|
|
537
|
+
|
|
538
|
+
&:hover
|
|
539
|
+
background: $primary-color
|
|
540
|
+
border-color: $primary-color
|
|
541
|
+
color: #fff
|
|
542
|
+
transform: translateY(-3px)
|
|
543
|
+
box-shadow: 0 4px 12px rgba(74, 144, 226, 0.4)
|
|
544
|
+
|
|
545
|
+
&:active
|
|
546
|
+
transform: translateY(-1px)
|
|
547
|
+
box-shadow: 0 2px 6px rgba(74, 144, 226, 0.3)
|
|
548
|
+
|
|
549
|
+
svg
|
|
550
|
+
width: 20px
|
|
551
|
+
height: 20px
|
|
552
|
+
|
|
553
|
+
&.show
|
|
554
|
+
display: flex
|
|
555
|
+
|
|
556
|
+
@media mq-mobile
|
|
557
|
+
bottom: 20px
|
|
558
|
+
right: 20px
|
|
559
|
+
width: 44px
|
|
560
|
+
height: 44px
|
|
561
|
+
|
|
562
|
+
svg
|
|
563
|
+
width: 18px
|
|
564
|
+
height: 18px
|