上に戻る機能

code:script.js

const $upButton = $('<div>').addClass('up-to-button');

$('.row-flex > .col-page-side').eq(1).append($upButton);

$upButton.click(() => {

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

});

code:style.css

/** 変数 */

.up-to-button {

}

.col-page-side {

position: relative;

}

.up-to-button {

position: fixed;

bottom: 40px;

width: 40px;

height: 40px;

margin-left: 15px;

border-radius: 50%;

cursor: pointer;

background-color: var(--background-color);

}

.up-to-button::before {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -40%);

content: '\2303';

font-size: 25px;

font-family: 'Font Awesome 5 Free';

color: var(--arrow-color);

}