Создание кнопки вверх
Как создать и установить кнопку «вверх» на сайт
Дата публикации
8 Августа 2019
Дата изменения
4 Июля 2020
Уникальных просмотров
1.155
Оглавление
Кнопка вверх для сайта
Вариаций решений создания кнопки «Вверх» для сайта огромное множество, можно написать данный функционал самому, применив 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,1084 s
Время запросов: 0,1084 s
Количество запросов: 25
Источник: cache
Время запросов: 0,1084 s
Количество запросов: 25
Источник: cache