[分享]自定义JS脚本:点击MEMO标题返回顶部 #1259
moulai
started this conversation in
Show and tell
Replies: 2 comments
-
|
回到顶部按钮以及最底部 // --- 功能:滚动到顶部按钮 ---
function addScrollToTopButton() {
var scrollButton = document.createElement('button');
scrollButton.innerHTML = '↑';
scrollButton.id = 'custom-scroll-top';
scrollButton.title = '回到顶部';
scrollButton.setAttribute('aria-label', '回到顶部');
scrollButton.style.cssText = `
position: fixed;
bottom: 20px;
right: calc(50% + 25px);
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(22, 163, 74, 0.8);
color: white;
border: none;
cursor: pointer;
display: none;
z-index: 1000;
font-size: 18px;
transition: all 0.3s ease;
`;
scrollButton.onclick = function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
};
scrollButton.onmouseenter = function() {
this.style.background = 'rgba(22, 163, 74, 1)';
this.style.transform = 'scale(1.1)';
};
scrollButton.onmouseleave = function() {
this.style.background = 'rgba(22, 163, 74, 0.8)';
this.style.transform = 'scale(1)';
};
document.body.appendChild(scrollButton);
}
// --- 功能:滚动到底部按钮 ---
function addScrollToBottomButton() {
var scrollButton = document.createElement('button');
scrollButton.innerHTML = '↓';
scrollButton.id = 'custom-scroll-bottom';
scrollButton.title = '看看最下面有啥?';
scrollButton.setAttribute('aria-label', '看看最下面有啥?');
scrollButton.style.cssText = `
position: fixed;
bottom: 20px;
left: calc(50% + 25px);
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(59, 130, 246, 0.8);
color: white;
border: none;
cursor: pointer;
display: none;
z-index: 1000;
font-size: 18px;
transition: all 0.3s ease;
`;
scrollButton.onclick = function() {
window.scrollTo({
top: document.body.scrollHeight,
behavior: 'smooth'
});
};
scrollButton.onmouseenter = function() {
this.style.background = 'rgba(59, 130, 246, 1)';
this.style.transform = 'scale(1.1)';
};
scrollButton.onmouseleave = function() {
this.style.background = 'rgba(59, 130, 246, 0.8)';
this.style.transform = 'scale(1)';
};
document.body.appendChild(scrollButton);
}
// --- 监听滚动事件,控制按钮显示 ---
window.addEventListener('scroll', function() {
var scrollTop = window.scrollY;
var scrollHeight = document.body.scrollHeight;
var windowHeight = window.innerHeight;
var distanceToBottom = scrollHeight - (scrollTop + windowHeight);
var topButton = document.getElementById('custom-scroll-top');
var bottomButton = document.getElementById('custom-scroll-bottom');
// 顶部按钮:滚动超过200px后显示
if (topButton) {
topButton.style.display = scrollTop > 200 ? 'block' : 'none';
}
// 底部按钮:距离底部超过100px时显示
if (bottomButton) {
bottomButton.style.display = distanceToBottom > 100 ? 'block' : 'none';
}
});
// --- 初始化两个按钮 ---
addScrollToTopButton(); // 添加回到顶部按钮
addScrollToBottomButton(); // 添加滚动到底部按钮 |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
还有一个不错的时间显示功能 // --- 功能:显示当前日期时间 ---
function showCurrentTime() {
var now = new Date();
var options = {
year: 'numeric',
month: 'long',
day: 'numeric',
weekday: 'long',
hour: '2-digit',
minute: '2-digit'
};
var timeString = now.toLocaleDateString('zh-CN', options);
// 检查是否已存在时间显示元素
var timeElement = document.getElementById('custom-time-display');
if (!timeElement) {
timeElement = document.createElement('div');
timeElement.id = 'custom-time-display';
timeElement.style.cssText = `
position: fixed;
top: 10px;
right: 10px;
background: rgba(255, 255, 255, 0.8);
padding: 8px 12px;
border-radius: 8px;
font-size: 12px;
color: #333;
z-index: 1000;
backdrop-filter: blur(4px);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
`;
document.body.appendChild(timeElement);
}
timeElement.textContent = timeString;
}
// 每分钟更新一次时间
showCurrentTime();
setInterval(showCurrentTime, 60000); |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
非常简陋,直接使用超链接形式实现。
于v0.11.0版本测试通过。
Beta Was this translation helpful? Give feedback.
All reactions