Дата публикации
8 Августа 2019
Дата изменения
4 Июля 2020
Уникальных просмотров
991

Оглавление

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

Вариаций решений создания кнопки «Вверх» для сайта огромное множество, можно написать данный функционал самому, применив 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);
    });
});

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

Благодарность автору

Если по какой-либо причине вы хотите поблагодарить автора данного ресурса, вы можете это сделать одним из удобных для вас способов ниже.

Один из самых популярных способов поблагодарить автора, воспользоваться сервисом Яндекс.Деньги.

Время работы: 0,0986 s
Время запросов: 0,0986 s
Количество запросов: 25
Источник: cache