利用者:Early correct/scroll.js

お知らせ: 保存した後、ブラウザのキャッシュをクリアしてページを再読み込みする必要があります。

多くの Windows や Linux のブラウザ

Ctrl を押しながら F5 を押す。

Mac における Safari

⇧ Shift を押しながら、更新ボタンをクリックする。

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);