修改页面字体为 Lato,添加较强的文字阴影,阅读进度指示器,移动端回到顶部按钮,和阅读位置记忆功能。
// ==UserScript==
// @name 四维阅读增强
// @namespace http://tampermonkey.net/
// @version 1.0
// @description 修改页面字体为 Lato,添加较强的文字阴影,阅读进度指示器,移动端回到顶部按钮,和阅读位置记忆功能。
// @author You
// @match *://*/*
// @grant GM_addStyle
// ==/UserScript==
(function() {
'use strict';
// Add Lato font from Google Fonts
const fontURL = 'https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap';
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = fontURL;
document.head.appendChild(link);
// Apply font and stronger text shadow styles
GM_addStyle(`
body {
font-family: 'Lato', sans-serif !important;
text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2); /* Set a stronger text shadow */
}
#reading-progress-bar {
position: fixed;
top: 0;
left: 0;
width: 0;
height: 5px;
background-color: #3b82f6;
z-index: 9999;
transition: width 0.25s ease;
}
#back-to-top-btn {
position: fixed;
left: 6px; /* Adjusted: 6px from the left edge */
bottom: 100px; /* Adjusted: 100px from the bottom */
padding: 10px;
background-color: #000;
color: #fff;
border: none;
border-radius: 50%;
z-index: 9999;
display: none;
cursor: pointer;
}
`);
// Create and insert the progress bar
let progressBar = document.createElement('div');
progressBar.id = 'reading-progress-bar';
document.body.appendChild(progressBar);
// Calculate scroll percentage and update the progress bar
function updateProgressBar() {
let scrollTop = window.scrollY || document.documentElement.scrollTop;
let documentHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
let progress = (scrollTop / documentHeight) * 100;
progressBar.style.width = progress + '%';
}
// Update progress bar on scroll
window.addEventListener('scroll', updateProgressBar);
// Execute after page loads
window.onload = function() {
updateProgressBar(); // Initialize progress bar
};
// Create a back-to-top button
const backToTopButton = document.createElement('button');
backToTopButton.id = 'back-to-top-btn';
backToTopButton.textContent = '↑'; // Button content
document.body.appendChild(backToTopButton);
let lastScrollTop = 0; // Save previous scroll position
// Smoothly scroll to top when button is clicked
backToTopButton.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
// Show/hide button based on scroll, and control display based on scroll direction
window.addEventListener('scroll', () => {
let currentScrollTop = window.scrollY; // Current scroll position
if (currentScrollTop > 200) {
// Show button when scrolling up
if (currentScrollTop < lastScrollTop) {
backToTopButton.style.display = 'block';
} else {
backToTopButton.style.display = 'none'; // Hide button when scrolling down
}
} else {
backToTopButton.style.display = 'none'; // Hide button if scroll is less than 200px
}
lastScrollTop = currentScrollTop; // Update previous scroll position
});
// Reading position memory
const currentUrl = window.location.href;
// Check local storage for saved reading progress
const savedScrollPosition = localStorage.getItem(currentUrl);
// If progress is saved, restore to that position
if (savedScrollPosition) {
window.scrollTo(0, savedScrollPosition);
}
// Save current scroll position on every scroll
window.addEventListener('scroll', function() {
localStorage.setItem(currentUrl, window.scrollY);
});
})();