利用 者 :Yayoruya/scroll.js
お
- Ctrl を
押 しながら F5 を押 す。
Mac における Safari
Mac における Chrome や Firefox
- ⌘ Cmd と ⇧ Shift を
押 しながら R を押 す。
var scrollUpButton = document.createElement('div');
scrollUpButton.setAttribute('id', 'scroll-up-button');
scrollUpButton.style.position = 'fixed';
scrollUpButton.style.bottom = '60px';
scrollUpButton.style.right = '10px';
scrollUpButton.style.width = '40px';
scrollUpButton.style.height = '40px';
scrollUpButton.style.borderRadius = '50%';
scrollUpButton.style.backgroundColor = '#65BBE9';
scrollUpButton.style.opacity = '0.5';
scrollUpButton.style.cursor = 'pointer';
scrollUpButton.style.display = 'none';
scrollUpButton.style.fontFamily = 'Arial, sans-serif';
scrollUpButton.style.fontSize = '14px';
scrollUpButton.style.color = '#fff';
scrollUpButton.style.textAlign = 'center';
scrollUpButton.style.lineHeight = '40px';
scrollUpButton.innerHTML = 'UP';
scrollUpButton.onclick = function() {
window.scrollTo({
top: 0,
behavior: 'smooth'
});
};
var scrollDownButton = document.createElement('div');
scrollDownButton.setAttribute('id', 'scroll-down-button');
scrollDownButton.style.position = 'fixed';
scrollDownButton.style.bottom = '10px';
scrollDownButton.style.right = '10px';
scrollDownButton.style.width = '40px';
scrollDownButton.style.height = '40px';
scrollDownButton.style.borderRadius = '50%';
scrollDownButton.style.backgroundColor = '#65BBE9';
scrollDownButton.style.opacity = '0.5';
scrollDownButton.style.cursor = 'pointer';
scrollDownButton.style.display = 'none';
scrollDownButton.style.fontFamily = 'Arial, sans-serif';
scrollDownButton.style.fontSize = '12px';
scrollDownButton.style.color = '#fff';
scrollDownButton.style.textAlign = 'center';
scrollDownButton.style.lineHeight = '40px';
scrollDownButton.innerHTML = 'DOWN';
scrollDownButton.onclick = function() {
window.scrollTo({
top: document.body.scrollHeight,
behavior: 'smooth'
});
};
window.onscroll = function() {
if ((window.pageYOffset + window.innerHeight) >= document.body.scrollHeight) {
scrollDownButton.style.display = 'none';
scrollUpButton.style.display = 'block';
} else if (window.pageYOffset <= 0) {
scrollUpButton.style.display = 'none';
scrollDownButton.style.display = 'block';
} else {
scrollUpButton.style.display = 'block';
scrollDownButton.style.display = 'block';
}
};
document.body.appendChild(scrollDownButton);
document.body.appendChild(scrollUpButton);