joomix

Блог

Кнопка «наверх» для сайта без jQuery

Новички в веб разработке довольно часто сталкиваются с сайтами, на которых отсутствует кнопка «наверх», и с помощью стандартных плагинов это сделать не получается - происходит конфликт библиотек jQuery (особенно это качается старых сайтов на Joomla).

Разработчик, имеющий мало опыта, вряд ли самостоятельно может разобраться с конфликтом, и такая, на первый взгляд, банальная работа перерастает в большую проблему.

Хотим вас успокоить, ведь можно сделать плавающую кнопку «наверх» на чистом javascript без использования сторонних библиотек. 

 

Этот скрипт и код можно скопировать в файл footer.php шаблона перед закрывающимся тегом «body»:

<script>
    var smoothJumpUp = function() {
        if (document.body.scrollTop>0 || document.documentElement.scrollTop>0) {
            window.scrollBy(0,-50);
            setTimeout(smoothJumpUp, 20);
        }
    }
    
    window.onscroll = function() {
      var scrolled = window.pageYOffset || document.documentElement.scrollTop;
      if (scrolled > 100) {
      	document.getElementById('upbutton').style.display = 'block';
      } else {
      	document.getElementById('upbutton').style.display = 'none';
      }
    }
</script>

<a id="upbutton" href="#" onclick="smoothJumpUp(); return false;">
    <img src="../images/up.png" alt="Top" border="none" title="Наверх">
</a>
    

Путь в скрипте src="../images/up.png" Вы можете заменить своим. И соответственно, по этому пути в указанную папку закинуть картинку Вашей кнопки.

 

В файле стилей добавьте следующие строки для стилизации кнопки:

  #upbutton {
    background: url("../images/up.png") no-repeat top left;
    height: 50px;
    width: 50px;
    bottom: 30px;
    right: 30px;
    cursor: pointer;
    display: none;
    position: fixed;
    z-index: 999;
  }

Все, наша кнопка готова. Надеемся, наша статья оказалась полезной для Вас!