Лучший способ сделать верхнюю / нижнюю кнопку прокрутки

Итак, я сделал кнопку в правом нижнем углу моей HTML-страницы, но мне было интересно, так как я сделал это впервые, есть ли другой лучший способ сделать это, или вы, ребята, можете увидеть что-нибудь интересное в том, как я это сделал?

Этот пост в основном предназначен для того, чтобы научиться делать все правильно, так как я в этом новичок.

Спасибо за вашу помощь.

Вот мой код -> если вы хотите НАЙТИ: JSfiddle

var bottomPage = document.getElementById('bottomPage');
var topPage = document.getElementById('topPage');
var lastScrollTop = 0;

bottomPage.addEventListener('click', scrollBottom);
topPage.addEventListener('click', scrollTop);

// element should be replaced with the actual target element on which you have applied scroll, use window in case of no target element.
window.addEventListener('scroll', function(){ // or element.addEventListener('scroll'....
  var st = window.pageYOffset || document.documentElement.scrollTop;
  if (st > lastScrollTop){
    bottomPage.style.display = 'none';
    topPage.style.display = '';
  } else {
    bottomPage.style.display = '';
    topPage.style.display = 'none';
  }
  lastScrollTop = st <= 0 ? 0 : st;
}, false);
function scrollBottom() {
  window.scrollTo(0,document.body.scrollHeight);
  bottomPage.style.display = 'none';
  topPage.style.display = '';
}
function scrollTop() {
  window.scrollTo(0, 0);
  topPage.style.display = 'none';
  bottomPage.style.display = '';
}
body{
  height: 3000px;
  background: white;
  background: linear-gradient(to bottom, #33ccff 0%, #ff99cc 100%);
}

.right-corder-container {
  position: fixed;
  right: 20px;
  bottom: 20px;
  vertical-align: middle;
  background: #dddddd79;
  text-align: center;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 25px;
  color: white;
  font-weight: bold;
  text-decoration: none
}

.right-corder-container img {
  width: 40px;
  height: 40px;
}

.right-corder-container:hover {
  background: #85858579;
  cursor: pointer;
}
<body>

  <button class="right-corder-container" id='bottomPage' type="button"><img src="https://i.postimg.cc/87f0hmm2/scroll-down.png"></button>

  <button class="right-corder-container" style="display: none;" id='topPage' type="button"><img src="https://i.postimg.cc/Tp4sL4gj/scroll-up.png"></button>


</body>

1 ответ
1

Некоторые точки JS

  • окно является объектом по умолчанию. Вам редко нужно его использовать. например window.scrollTo такой же как scrollTo как есть window.document такой же как document.

  • Вы можете использовать идентификатор элемента в качестве имени переменной JS для ссылки на элемент.

  • Для переменных, которые не меняются, используйте константы const скорее, чем куда или позволять

  • Избегайте установки значений стиля непосредственно для стиля элементов, лучше используйте правила и селекторы CSS для определения стилей.

  • Не допускайте попадания кода в глобальную область видимости, заключив его в IIFE (выражение немедленного вызова функции)

HTML / CSS дизайн

  • Создавать две кнопки не нужно. Используйте одну кнопку, чтобы упростить свой JS.

    Использование селекторов CSS для определения правил для содержимого кнопок позволяет использовать одно имя класса для переключения между опциями вверх и вниз. Добавьте имя класса для «вверх» и удалите для «вниз».

  • Нет необходимости в click события, чтобы изменить состояние кнопки как scroll событие сработает, когда вы позвоните Window.scrollTo и эта функция изменит состояние кнопки /

  • Вы добавили type атрибут кнопки. В этом нет необходимости, поскольку кнопка не является частью формы.

  • Почему вы добавили document.documentElement.scrollTop Element.scrollTop когда Window.pageYOffset это ноль ?? Эти два значения одинаковы! Кстати pageYOffset это псевдоним для Window.scrollY

Переписать

Переписывание пытается сделать код JS максимально простым.

Я удалил большую часть пользовательского стиля (изображения, фон), который можно легко добавить через HTML / CSS без необходимости изменять JavaScript.

;(()=>{
   var lastPos = 0, scrollToPos = document.body.scrollHeight;

   scrollBtn.addEventListener("click", () => scrollTo(0, scrollToPos));
   addEventListener("scroll", () => {
       scrollToPos = scrollY > lastPos ?  0 : document.body.scrollHeight;
       lastPos = Math.max(0, scrollY);
       scrollBtn.classList.toggle("scrollUp", scrollToPos === 0);
   }, false);
})();
body { height: 3000px }
#scrollBtn {
  position: fixed;
  right: 10px;
  bottom: 10px;
  cursor: pointer; 
}
#scrollBtn > .top { display: none } 
#scrollBtn.scrollUp > .top { display: initial } 
#scrollBtn.scrollUp > .bottom {  display: none } 
  <button id="scrollBtn">
      <span class="top">Top</span>
      <span class="bottom">Bottom</span>
  </button>

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *