Кнопка прокрутки вверх не работает в дочерних шаблонах

Я добавил кнопку прокрутки вверх в своем базовом шаблоне, и она отлично работает. Но когда я перехожу на любые другие страницы, кнопка не работает. Почему?!

Вот мой базовый шаблон:

<!DOCTYPE html>
<html>
  <head></head>

  <body>
    <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
    .
    .
    <div class="container">
      #import("content") 
    </div>
    .
    .
  </body>
</html>

И я использую JavaScript из приведенной выше ссылки:

window.onscroll = function() { scrollFunction() };

function scrollFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    $('#myBtn').fadeIn();
  } else {
    $('#myBtn').fadeOut();
  }
}

function topFunction() {
  document.body.scrollTop = 0; // For Safari
  document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}

Кнопка работает только на главной странице, но не на других страницах, хотя я вижу (из просмотра исходного кода страницы) <button onclick="topFunction()" id="myBtn" title="Go to top">Top</button> в теле. Кто-нибудь может помочь??


javascript scroll vapor leaf scrolltop
person AlwaysANovice    schedule 01.03.2018    source источник
comment
Похоже, ваш Javascript отображается только на базовой странице, а не на всех. Можете ли вы открыть консоль отладки (веб-инспектор, консоль Javascript и т. д.) и посмотреть, появляются ли какие-либо предупреждения или ошибки?   -  person tobygriffin    schedule 01.03.2018
comment
упс! вы абсолютно правы... была неопределенная ошибка Cannot read property 'style', которую я не заметил, и после ее исправления кнопка работает ^_^ :D спасибо!!   -  person AlwaysANovice    schedule 01.03.2018

Ответы (1)


arrow_upward
0
arrow_downward

Приведенный выше код на самом деле правильный, и теперь кнопка отлично работает на каждой странице. После того, как tobygriffin указал на это, я заметил ошибку Cannot read property 'style' of undefined, которой раньше не было. Кнопка работает на всех страницах после исправления этой ошибки.

Несмотря на то, что это была глупая ошибка с моей стороны, я сохраняю эти вопросы и ответы (не удаляя их), надеясь, что кому-то они могут пригодиться :)

person AlwaysANovice    schedule 01.03.2018
comment
Это не даст вам повторения, но вы должны пометить свой ответ как принятый. Таким образом, люди, просматривающие вопросы, будут знать, что ваш вопрос решен. - person Caleb Kleveter; 02.03.2018
comment
Я буду, ASA позволяет мне :) Спасибо - person AlwaysANovice; 02.03.2018