0

Изучаю JavaScript, решил сделать кнопку "наверх".
Написал данный код:

'use strict';
/* begin begin Back to Top button  */
(function() {
  function trackScroll() {
    var scrolled = window.pageYOffset;
    var coords = document.documentElement.clientHeight;

if (scrolled > coords) {
  goTopBtn.classList.add('back_to_top-show');
}
if (scrolled < coords) {
  goTopBtn.classList.remove('back_to_top-show');
}



}


function backToTop() {
    if (window.pageYOffset > 0) {
      window.scrollBy(0, -80);
      setTimeout(backToTop, 0);
    }
  }


var goTopBtn = document.querySelector('.back_to_top');


window.addEventListener('scroll', trackScroll);
  goTopBtn.addEventListener('click', backToTop);
})();
/* end begin Back to Top button  */
.matrix {
  width: 400px;
  margin: auto;
  text-align: justify;
}


/* begin begin Back to Top button  */

.back_to_top {
  position: fixed;
  bottom: 80px;
  right: 40px;
  z-index: 9999;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  background: #f5f5f5;
  color: #444;
  cursor: pointer;
  border-radius: 2px;
  display: none;
}

.back_to_top:hover {
  background: #e9ebec;
}

.back_to_top-show {
  display: block;
}


/* end begin Back to Top button  */
<div class="matrix">
  <script>
    for (var i = 0; i < 4000; i++) document.writeln(i)
  </script>
</div>
<!-- begin Back to Top button -->
<a class="back_to_top" title="Наверх">&uarr;</a>
<!-- end Back to Top button -->

Анимацию решил сделать, с помощью метода setTimeoutи рекурсии.
Прошу дать оценку моему коду.

Также задам вопросы:

1). Я обернул js код в анонимную функцию, это делается для того чтобы переменные не попадали в глобальную область видимости, прав ли я?

2). В функцииfunction backToTop(){...} нужно писать else{ return; }? Я поясню, мне понятно, что будет работать аналогично, но возможно по правилам "хорошего тона" нужно писать, вот и решил спросить.

3). 'use strict'; Если весь код переводим в "современный стандарт", то достаточно в самом верху документа один раз написать 'use strict';, прав ли я?
Поясню, в одной js библиотеке,в документе я видел много раз написанный 'use strict';, видимо это делалось потому что только часть кода была переведена в "современный стандарт", так ли это? Например если в моем коде 'use strict'; убрать с начала документа и написать в анонимной функции, перед основным кодом, то в "современный стандарт" будет переведен только тот код, что внутри анонимной функции, верно?

Nicolas Chabanovsky
  • 51,426
  • 87
  • 267
  • 507
Александр Казаков
  • 1,635
  • @andreymal Здравствуйте! Хочется увидеть пример такой анимации(как у меня в коде) на CSS. – Александр Казаков Apr 03 '17 at 14:13
  • Что значит “use strict”? - здесь описывается, что значит эта директива, это немного не то, про что ты написал – Grundy Apr 03 '17 at 15:30
  • А, я не вчитался, анимацию прокрутки делать без js ещё нельзя, да.) Хотя, возможно, есть смысл в requestAnimationFrame тогда – andreymal Apr 03 '17 at 16:49
  • @andreymal Ваш последний комментарий на ответ не подходит и даже на рекомендацию/совет не подходит. В чем этот самый смысл и какое будет преимущество по сравнению с моим решением? Лучше конечно код с вашим вариантом увидеть. Свой предыдущий комментарий(про CSS анимацию) лучше удалите, т.к. вам там кто-то уже плюс за него поставил, и в будущем кто-нибудь может подумать, что это действительно можно на CSS сделать. – Александр Казаков Apr 03 '17 at 22:21
  • @AlexandrKazakov, на самом деле на CSS можно сделать, просто еще не везде поддерживается – Grundy Apr 04 '17 at 06:24