利用者:Yayoruya/scroll.js
表示
お知らせ: 保存した後、ブラウザのキャッシュをクリアしてページを再読み込みする必要があります。
多くの Windows や Linux のブラウザ
- Ctrl を押しながら F5 を押す。
Mac における Safari
Mac における Chrome や Firefox
- ⌘ Cmd と ⇧ Shift を押しながら R を押す。
詳細についてはWikipedia:キャッシュを消すをご覧ください。
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);