Кнопка Наверх на читом JS с плавной прокруткой, настройки, нюансы

Создаем кнопку Наверх с плавной прокруткой (скроллом) самостоятельно – легко и просто! Обработка кнопки на чистом JS, никаких емких библиотек подключать не нужно! с плавной прокруткой и, что называется, без плагинов.

Посмотрим настройки, нюансы и рекомендации к данному решению и пр. и пр.

В общем-то, я никаких претензий к установке плагинов не имею (хотя многие полагают, будто б плагины – тяжело!), хотя это так! и в особенности, если те устанавливать сомнительные и нимало не думая!

В таких случаях, конечно, ни о каких скоростях и думать не мечтай. Ну а в целом – запустить сайт возможно даже на конструкторе, хотя я такие подходы и не жалую…

Главное, знать меру и мало-мальски понимать задачи и цели для сайта: как и для чего тот будет работать и, конечно же, иметь представление по строительству веб-сайтов:

Кнопка Наверх на читом JS с плавной прокруткой

Данный вариант Кнопки с плавной прокруткой возможно реализовать на сайте так:

…организовать все, что нужно – файлы в шаблоне;

или создать отдельный собственный плагин. Плюс такого лично-созданного плагина в том, что в нем не буде ничего лишнего, что может неблагоприятно сказаться на скорости загрузки сайта в целом! к тому же все под вашим контролем.

И еще отметим тот факт, что данное решение “кнопки кверху” обеспечивается так просто, что никаких излишних иконок (картинок-иконок кнопки), и никаких излишних подключений по файлам шаблона – все возможно подключить к сайту, скажем так, удаленно, т.е. в плагине – автоматически и JS, и CSS …и подключение отработки в footer вашего активного шаблона осуществляется также автоматически, через событие wp-footer…

• Итак, если решили создавать плагин – создавайте.
• Если работаем кодом – работаем с кодом…

Стартуем от создания JS файла: имя файла JS может быть, например, таким: cnop-verh-plav.js – называйте как хотите, главное – ясно и понятно для себя! Затем помещаете этот файл в соответствующую директорию вашего шаблона, обычно это папка js.

Затем в созданный JS файл прописываете код, который выведен чуть ниже (некоторые настройки я закомментировал): данное решение js из какого-то плагина…

Все лишнее – как то: варианты множества иконок; варианты js-отработки кнопки, варианты дизайна и подключения js; Настройки в админке и пр. и пр. все это убрано! А именно потому и ВЕСЬМА логичен собственный плагин! и никаких нагрузок!.. если, конечно, все делать правильно!

итак, код:

document.addEventListener( 'DOMContentLoaded', function(){
//create DOM element
const scrollTopHTML = `<button role="button" area-lable="Scroll Top" class="scroll-top-btn"></button>`
const div = document.createElement( 'div' )
div.innerHTML = scrollTopHTML.trim()
const scrollTop = div.firstChild
document.body.append( scrollTop )
//init
scrollTop.addEventListener( 'click', button_click )

window.addEventListener( 'scroll', showHideButton )
showHideButton()
//methods
function button_click( ev ) {
ev.preventDefault();

scroll_to( {
element: document.documentElement,
goto: 0,
speed: 980, //2000 скорость промотки
frames: 10, //10
easing_func: 'easeOutCirc',
} )

}

function showHideButton() { //300 появление стрелки через...
window.scrollY > 1200
? scrollTop.classList.add( '--visible' )
: scrollTop.classList.remove( '--visible' )
}

function scroll_to( args ) {
/**
* t = Time - Amount of time that has passed since the beginning of the animation.
* Usually starts at 0 and is slowly increased using a game loop or other update function.
* b = Beginning value - The starting point of the animation.
* Usually it's a static value, you can start at 0 for example.
* c = Change in value - The amount of change needed to go from starting point to end point.
* It's also usually a static value.
* d = Duration - Amount of time the animation will take.
* Usually a static value aswell.
*
* @see https://spicyyoghurt.com/tools/easing-functions
* @see https://easings.net/
*/
const easing_funcs = {

easeLinear: ( t, b, c, d ) => {
return c * t / d + b
},
easeInSine: ( t, b, c, d ) => {
return -c * Math.cos(t / d * (Math.PI / 2)) + c + b;
},
easeOutSine: ( t, b, c, d ) => {
return c * Math.sin(t / d * (Math.PI / 2)) + b;
},
easeInCubic: ( t, b, c, d ) => {
return c * (t /= d) * t * t + b;
},
easeOutCubic: ( t, b, c, d ) => {
return -c * (t /= d) * (t - 2) + b
},
easeInExpo: ( t, b, c, d ) => {
return (t === 0) ? b : c * Math.pow(2, 10 * (t / d - 1)) + b;
},
easeOutExpo: ( t, b, c, d ) => {
return ( t === d ) ? b + c : c * ( -Math.pow( 2, -10 * t / d ) + 1 ) + b
},
easeOutCirc: ( t, b, c, d ) => {
return c * Math.sqrt(1 - (t = t / d - 1) * t) + b
},

}

const el = args.element || document.documentElement
const speed = args.speed
const frames = args.frames || 10
const goto_pos = args.goto
const easing_func = args.easing_func || 'easeLinear'
const anim_end_func = args.anim_end || null
const anim_start_func = args.anim_start || null

const start_pos = el.scrollTop
const start_time = Date.now()
let tuntime_frames = Math.round( speed / frames )

const recursive = () => {

let left_time = ( Date.now() - start_time )
let anim_tick = left_time / tuntime_frames--
let anim_step = Math.min( left_time / speed, 1 ) // max 1

el.scrollTop = easing_funcs[ easing_func ]( anim_step, start_pos, (goto_pos - start_pos), 1 )

if( anim_step !== 1 ){
// next anim step
this._scroll_to_tick_tm = setTimeout( recursive, anim_tick )
}
//done
else {
delete this._scroll_to_tick_tm
// add a delay for sure
anim_end_func ? setTimeout( anim_end_func, 20 ) : null
}

}
//RUN if already not in process
if( ! this._scroll_to_tick_tm ){

anim_start_func && anim_start_func()

recursive()
}
}
} );

Готово!

Теперь добавим обработку дизайна. А именно допишем в файл стилей активного шаблона (дочерней темы, это правильнее) данный ниже код css:

стили css для файла style.css

Можно скопировать и переместить себе. Пояснений в коде не давал, но можно легко взглянуть поиграть с дизайном в Консоли разработчиков браузера.

.scroll-top-btn{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23999' aria-hidden='true'%3E%3Cpath fill-rule='evenodd' d='M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z' clip-rule='evenodd'%3E%3C/path%3E%3C/svg%3E");
background-repeat:no-repeat;background-size:70%;background-position:center 50%;background-color:var(--white);
font-size:150%;padding:0;border:0;display:block;overflow:hidden;width:0;height:0;z-index:99;position:fixed;bottom:2rem;right:2rem;line-height:0;
border-radius:var(--border-radius);box-shadow:0 3px 30px -5px rgb(0 0 0 / 30%);opacity:.6;transition:all 150ms;cursor:pointer;
@include layoutBreak{display:none}&.--visible{overflow:visible;width:2em;height:2em}&:hover{opacity:1}}

Далее идем так, и это на данном этапе весьма логично, – подключаем JS файл:

подключаем файл js для плавной кнопки наверх

Добавляете куда-то в файл footer.php напрямую, т.е. добавляете показанную ниже строку (измените имя шаблона) или через экшен add_action ( ‘wp-footer’, ‘function’ )

<script src="/wp-content/themes/шаблон/js/cnop-verh-plav.js"></script>

можно подключить только для отработки на десктопе и пр. А это о правилах подключения JS … А пример реализации кнопки можно посмотреть на этом сайте: алмика ру

Видео студии: