воскресенье, 18 октября 2020 г.

 Теперь разберемся, что нужно сделать для подключения кнопки к сайту

Изображение:

Вам понадобится изображение самой кнопки можете взять любое, а можете использовать вот это:

Скачать стрелку .png

HTML код:

Для вызова кнопки после основного контента страницы или перед тегом разместите следующий HTML код:

1
<a href="#" class="scrollup" style="opacity: 1;">Наверх</a>

CSS стили:

1
2
3
4
5
6
7
8
9
10
11
.scrollup{
    width:40px;
    height:40px;
    opacity:0.3;
    position:fixed;
    bottom:50px;
    right:100px;
    display:none;
    text-indent:-9999px;
    background: url('icon_top.png') no-repeat;
}

При помощи этого кода кроме внешнего вида мы определяем позицию кнопки и задаем отступы 100 px с права и 50 px снизу. Его лучше всего добавить в файл стилей вашего сайта.

JQuery:

Для начала подключаем библиотеку, если она еще не подключена для вашего сайта. Для этого между тегами <head>...</head>? вставляем следующее:

1
2
<script type="text/javascript" src="//web-ptica.ru/VRV-files/jquery-2.1.3.min.js ">
 </script>

Затем сразу после подключения библиотеки необходимо расположить следующий код JQuery:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script type="text/javascript">
$(document).ready(function(){
  
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollup').fadeIn();
        } else {
            $('.scrollup').fadeOut();
        }
        });
          
        $('.scrollup').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600);
        return false;
    });
  
});
</script>

Первый ScrollTop - определяет текущее вертикальное положение полосы прокрутки и если оно становится больше 100 px, то автоматически появляется кнопка. Если хотите чтобы она появлялась раньше или позже изменить в необходимую сторону это значение.

Как вы видите есть еще два параметра - 0 - значит страница будет прокручена вверх до самого начала до нулевого пикселя, а 600 - это скорость анимации в миллисекундах.

.scrollup{ width:40px; height:40px; opacity:0.3; position:fixed; bottom:50px; right:100px; display:none; text-indent:-9999px; background: url('icon_top.png') no-repeat; }
Автор: на