Простая кнопка "Наверх" для сайта на JS (с анимацией)


Скрипт прокрутки страницы к верху на javascript с плавной анимацией.
Полезно для новостных сайтов, для сайтов с большим количеством информации, галерей и т.д.

Установка
1. Открываем любой css файл и в конец дописываем:

div.scrollup {
  position: fixed;
  color: #fff; 
  background-color: #ddd; 
  right: 20px; 
  bottom: 0px; 
  padding: 4px 10px; 
  font-size: 20px; 
  border-top-left-radius: 4px; 
  border-top-right-radius: 4px; 
  cursor: pointer;
  display: none; 
  text-align: center;
}
div.scrollup:hover {
  background-color: #000;
}

2. В main.tpl либо в любой js файл так же в самом конце вставляем:
$(function() {
  $('.scrollup').click(function() {
    $("html, body").animate({
      scrollTop:0
    },1000);
  })
})
$(window).scroll(function() {
  if ($(this).scrollTop()>200) {
    $('.scrollup').fadeIn();
  }
  else {
    $('.scrollup').fadeOut();
  }
});

3. Остается только вставить нашу кнопку в шаблон. Пример для шаблонов DLE.
Открываем main.tpl и желательно в нижней части контента вставляем:
<div class="scrollup">
  <i class="fa fa-chevron-up"></i>
</div>

В кнопке в качестве иконки используется шрифт Font Awesome!
скачать dle 11.1смотреть фильмы бесплатно


Комментариев 3
  1. Artisteer
    Где здесь задаётся высота экрана, при которой кнопка появляется?
    1. Stanislavskiy11 Админ Ответ
      scrollTop:
      1. Artisteer Ответ
        В чём там число измеряется? К примеру ставить 1, 100 или 1000?

Внимание!

Ознакомьтесь со статьёй по ссылке ниже.

Сайт мошенников
Информация