Связаться со мной можно через Вконтакте или почту evexa@mail.ru

Обычная кнопка «Вверх» с плавной прокруткой

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

Первым делом

Я думаю если вы уже ставите на свой сайт то библиотека будет подключена, если нет то в <head> подключаем библиотеку, например эту:

JS
1
<script type="text/javascript" src="http://ajax.googleapis.com/ ajax/libs/jquery/1.4.3/ jquery.min.js"></script>

Подключаем скрипт

В низ страницы перед закрывающимся тегом добавляем:

JS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
$(function() {
 $.fn.scrollToTop = function() {
  $(this).hide().removeAttr("href");
  if ($(window).scrollTop() >= "250") $(this).fadeIn("slow")
  var scrollDiv = $(this);
  $(window).scroll(function() {
   if ($(window).scrollTop() <= "250") $(scrollDiv).fadeOut("slow")
   else $(scrollDiv).fadeIn("slow")
  });
  $(this).click(function() {
   $("html, body").animate({scrollTop: 0}, "slow")
  })
 }
});
$(function() {
 $("#top").scrollToTop();
});
</script>

и еще вот это

HTML
1
<a id="top" href="#"</a>

Добавляем стили

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#top{
    background:url(/img/top.png) no-repeat;
    z-index: 9999;
    opacity: 0.6;
    width: 50px;
    height: 50px;
    display: block;
    position: fixed;
    cursor: pointer;
    right: 13px;
    bottom: 9px;
    float:right;
}
#top:hover{
         opacity: 0.9;
}

Должно работать.

Опубликовано: 18.08.2017
Категория: JavaScript
Комментарии отключены. Есть вопросы? Пишите в Вконтакте или почту evexa@mail.ru.
Всего комментариев: 0

Оставить комментарий

Наверх