Как сделать кнопку «наверх» для сайта

Маленькая, но полезная кнопочка «наверх», которая весьма часто используется посетителями сайта. Хотелось бы поделиться своим вариантом, без картинки, чтобы не нагружать страницы. Лучше будет разместить код по отдельности в соответствующие файлы, но можно и разместить этот код в конце страницы перед тегом </body> и он должен сразу работать, если конечно у Вас уже подключен плагин Jquery.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<div id="scrollup"></div>



<style> 

    #scrollup {

        position: fixed; /* фиксированная позиция */

        opacity: 0.8; /* прозрачность */

        padding: 15px 10px 10px; /* отступы */

        background: #aaa; /* цвет кнопки */

        border-radius: 5px; /* скругление углов */

        -webkit-border-radius: 5px;

        -moz-border-radius: 5px;

        left: 10px; /* отступ слева */

        bottom: 10px; /* отступ снизу */

        display: none;

        cursor: pointer;

        width: 40px;

        height: 40px;

    }

   

    #scrollup:after {

        content: "";

        display: block;

        width: 12px;

        height: 12px;

        border-left: 2px solid #fff; /*толщина и цвет стрелки*/

        border-top: 2px solid #fff; /*толщина и цвет стрелки*/

        -webkit-transform: rotate(45deg);

            -ms-transform: rotate(45deg);

                transform: rotate(45deg);

        position: relative;

        top: 2px;

        left: 3px;

    }

</style>

    

<script>

    $(document).ready(function() {

        var $speed = 800; //Задать скорость прокрутки

        $('#scrollup').on('click', function(){

            $('body,html').animate({ scrollTop: 0 }, $speed); 

            return false;

        });



        $(window).scroll(function(){

            if ( $(document).scrollTop() > 0 ) {

                $('#scrollup').fadeIn('fast');

            } else {

                $('#scrollup').fadeOut('fast');

            }

        });

    });

</script>

Если у Вас кнопка не заработала или появляется какя-то ошибка, вы можете обратиться ко мне за помощью!
Стоимость установки такой кнопки на Ваш сайт — 500 рублей.