Оглавление

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

Вариаций решений создания кнопки «Вверх» для сайта огромное множество, можно написать данный функционал самому, применив jQuery, JavaScript или любой его фреймворк. В данной статье я покажу простой пример реализации данной кнопки с помощью обычного jQuery.

Разметка

Для начала пишем разметку перед открывающим тегом <body>. Я люблю SVG, посему заранее проставил разметку SVG файла в качестве иконки стрелочки. Все что внутри тегов svg, можно заменить, к примеру, на Font Awesome и аналоги.

<a id="toTop">
    <svg width="40pt" height="40pt" viewBox="0 0 630 630" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <g id="#009de8ff">
            <path opacity="1.00" d=" M 223.16 57.08 C 280.26 35.42 344.62 33.70 402.85 52.09 C 403.85 52.38 404.86 52.70 405.86 53.04 C 407.88 53.64 409.88 54.33 411.85 55.09 C 414.56 55.97 417.22 57.01 419.88 58.03 C 421.53 58.71 423.21 59.36 424.88 60.01 C 426.53 60.72 428.18 61.42 429.86 62.08 C 434.23 63.97 438.54 66.03 442.82 68.13 C 443.32 68.38 444.31 68.87 444.81 69.12 C 449.18 71.38 453.56 73.65 457.82 76.14 C 459.49 77.13 461.17 78.11 462.85 79.11 C 465.54 80.73 468.20 82.39 470.82 84.13 C 471.81 84.79 472.82 85.45 473.82 86.11 C 477.22 88.38 480.57 90.71 483.85 93.16 C 501.55 106.18 517.73 121.29 531.82 138.16 C 538.27 145.82 544.30 153.84 549.85 162.18 C 552.28 165.79 554.65 169.44 556.86 173.18 C 558.27 175.46 559.59 177.80 560.90 180.14 C 565.46 187.81 569.20 195.98 572.94 204.09 C 573.96 206.41 574.97 208.75 575.91 211.10 C 576.57 212.78 577.24 214.46 577.93 216.13 C 579.35 219.78 580.67 223.46 581.90 227.18 C 582.24 228.17 582.57 229.17 582.91 230.18 C 586.98 242.51 590.06 255.15 592.32 267.93 C 592.85 271.33 593.72 274.71 593.54 278.19 C 595.27 278.21 596.98 278.50 598.57 279.23 C 597.06 279.43 595.55 279.57 594.05 279.65 C 599.47 319.15 595.78 359.80 583.95 397.85 C 582.73 401.89 581.46 405.93 579.88 409.84 C 578.98 412.55 577.96 415.22 576.87 417.85 C 575.95 420.21 574.98 422.56 573.96 424.88 C 572.65 427.91 571.30 430.92 569.88 433.90 C 569.21 435.23 568.58 436.58 567.96 437.93 C 567.00 439.94 565.98 441.92 564.89 443.86 C 557.99 457.19 549.89 469.89 540.84 481.86 C 522.69 505.83 500.69 526.94 475.82 543.87 C 474.83 544.53 473.83 545.20 472.84 545.88 C 466.98 549.76 461.02 553.52 454.82 556.83 C 448.21 560.49 441.57 564.17 434.52 566.91 L 434.28 567.37 C 431.45 568.50 428.64 569.68 425.86 570.91 C 424.19 571.58 422.52 572.24 420.85 572.90 C 417.21 574.33 413.55 575.71 409.83 576.92 C 408.84 577.26 407.85 577.61 406.87 577.96 C 405.85 578.28 404.84 578.59 403.83 578.91 C 352.05 595.48 295.36 596.16 243.18 580.94 C 236.07 578.89 229.05 576.55 222.15 573.91 C 220.47 573.24 218.79 572.58 217.11 571.94 C 215.46 571.25 213.81 570.57 212.15 569.92 C 205.73 567.07 199.29 564.25 193.12 560.89 C 184.88 556.66 176.88 551.97 169.15 546.87 C 167.12 545.58 165.14 544.23 163.17 542.85 C 160.80 541.23 158.46 539.56 156.16 537.84 C 134.06 521.55 114.45 501.94 98.15 479.84 C 96.43 477.54 94.75 475.21 93.15 472.83 C 86.88 463.89 81.19 454.54 76.12 444.86 C 73.95 440.95 71.93 436.96 70.14 432.86 C 68.72 429.90 67.34 426.93 66.11 423.88 C 64.65 420.59 63.29 417.25 62.08 413.86 C 38.40 352.22 38.00 282.00 61.10 220.12 C 62.02 217.46 63.02 214.82 64.11 212.22 C 65.06 209.84 66.06 207.49 67.10 205.15 C 69.23 200.06 71.73 195.13 74.16 190.18 C 76.10 186.47 78.00 182.75 80.14 179.15 C 82.02 175.75 84.02 172.41 86.14 169.15 C 90.12 162.58 94.57 156.31 99.15 150.15 C 118.23 124.77 141.62 102.58 168.16 85.12 C 169.16 84.46 170.17 83.80 171.18 83.14 C 176.07 79.98 181.06 76.96 186.19 74.18 C 186.67 73.91 187.63 73.37 188.11 73.10 C 193.33 70.21 198.67 67.52 204.10 65.04 C 204.60 64.81 205.60 64.36 206.11 64.13 C 208.42 63.06 210.75 62.03 213.11 61.08 C 216.41 59.63 219.76 58.28 223.16 57.08 M 239.18 334.27 C 217.41 377.88 195.41 421.38 173.88 465.12 C 224.01 443.58 274.06 421.86 324.10 400.10 C 374.00 421.69 423.80 443.52 473.88 464.68 C 450.39 417.32 426.77 370.02 403.16 322.71 C 376.82 270.22 350.82 217.55 324.19 165.20 C 295.77 221.51 267.47 277.89 239.18 334.27 Z" />
        </g>
        <g id="#ffffffff">
            <path fill="#ffffff" opacity="1.00" d=" M 239.18 334.27 C 267.47 277.89 295.77 221.51 324.19 165.20 C 350.82 217.55 376.82 270.22 403.16 322.71 C 426.77 370.02 450.39 417.32 473.88 464.68 C 423.80 443.52 374.00 421.69 324.10 400.10 C 274.06 421.86 224.01 443.58 173.88 465.12 C 195.41 421.38 217.41 377.88 239.18 334.27 Z" />
        </g>
    </svg>
</a>

Стилизация иконки

Стили для кнопки — редактируйте под ваш вкус.

#toTop {
    position: fixed;
    display: inline-block;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    text-align: center;
    border-radius: 3px;
    color: #282C34;
    transition: background-color .3s, opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
}

#toTop svg {
    fill: #1b9ce5;
    transition: .25s;
}

#toTop:hover svg {
    cursor: pointer;
    fill: #f79e02;
    transition: .25s;
}

#toTop.show {
    opacity: 1;
    visibility: visible;
}

jQuery код для кнопки «Вверх»

Ну и сам jQuery

$(document).ready(function () {
    var btn = $('#toTop');

    // Запускаем обработчик события "прокрутки"
    $(window).scroll(function () {
        // Получаем значение прокрутки и если оно больше 600px
        if ($(window).scrollTop() > 600) {
            // Показываем кнопку, иначе
            btn.addClass('show');
        } else {
            // Прячем
            btn.removeClass('show');
        }
    });

    // При клике на кнопку, с помощью плавной анимации устанавливаем положение события scrollTop на 0
    btn.on('click', function (e) {
        e.preventDefault();
        $('html, body').animate({scrollTop: 0}, 500);
    });
});

Пример такой реализации кнопки «Вверх», можете наблюдать на данном сайте.