OpenAI Апр 19, 2025

Кнопка “Вернуться к началу” с плавным скроллом: реализация на разных технологиях

Кнопка "Вернуться к началу" с плавным скроллом

Многие спрашивали в комментариях, как реализована кнопка "Вернуться к началу" на этом сайте. Давайте разберемся!

Преимущества:

  • Работает во всех браузерах.
  • Исчезает при прокрутке страницы вверх.
  • Может быть добавлена на любой сайт, не только на WordPress.

Мы создадим кнопку с фиксированным положением, которая при нажатии плавно прокрутит страницу вверх и исчезнет, когда мы достигнем верхней части страницы.

Содержание:

  1. Вариант 1: Натуральный JS
  2. SCSS стили
  3. Вариант 1.2: Натуральный JS (с функцией плавного скролла)
  4. Вариант 2: Кнопка "Вернуться к началу" на чистом JavaScript
  5. Вариант 3: Кнопка "Вернуться к началу" на jQuery
  6. Изображения для кнопок (для вариантов 2 и 3)

Вариант 1: Натуральный JS

Этот код создаст кнопку и добавит её на страницу.

document.addEventListener('DOMContentLoaded', function() {
let div = document.createElement('div');
div.innerHTML = <button role="button" aria-label="Scroll Top" class="scroll-top-btn"></button>.trim();
let scrollTop = div.firstChild;

document.body.append(scrollTop);

scrollTop.addEventListener('click', ev => {
    window.scrollTo(0, 0);
});

let showHideButton = function() {
    window.scrollY > 300
        ? scrollTop.classList.add('--visible')
        : scrollTop.classList.remove('--visible');
};

window.addEventListener('scroll', showHideButton);
showHideButton();

});

Плавная прокрутка

Плавная прокрутка достигается с помощью следующих стилей:

html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-height) + 1rem);
}

SCSS стили

Теперь добавим стили для кнопки:

.scroll-top-btn {
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%);

background-color: var(--white);
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%;

opacity: .6;
transition: all 150ms;
cursor: pointer;

@include layoutBreak {
    display: none;
}

&.--visible { 
    overflow: visible; 
    width: 2em; 
    height: 2em; 
}

&:hover {
    opacity: 1;
}

}

Вариант 1.2: Натуральный JS (с функцией плавного скролла)

Этот вариант использует улучшенную функцию прокрутки:

document.addEventListener('DOMContentLoaded', function() {
const scrollTopHTML = <button role="button" aria-label="Scroll Top" class="scroll-top-btn"></button>;
const div = document.createElement('div');
div.innerHTML = scrollTopHTML.trim();
const scrollTop = div.firstChild;
document.body.append(scrollTop);

scrollTop.addEventListener('click', button_click);

window.addEventListener('scroll', showHideButton);
showHideButton();

function button_click(ev) {
    ev.preventDefault();
    scroll_to({
        element: document.documentElement,
        goto: 0,
        speed: 2000,
        frames: 10,
        easing_func: 'easeOutCirc',
    });
}

function showHideButton() {
    window.scrollY > 300
        ? scrollTop.classList.add('--visible')
        : scrollTop.classList.remove('--visible');
}

function scroll_to(args) {
    const easing_funcs = {
        easeLinear: (t, b, c, d) => c * t / d + b,
        easeOutCirc: (t, b, c, d) => c * Math.sqrt(1 - (t = t / d - 1) * t) + b,
    };

    const el = args.element || document.documentElement;
    const speed = args.speed;
    const start_pos = el.scrollTop;
    const start_time = Date.now();

    const recursive = () => {
        const left_time = (Date.now() - start_time);
        const anim_step = Math.min(left_time / speed, 1); // максимум 1

        el.scrollTop = easing_funcs[args.easing_func](anim_step, start_pos, args.goto - start_pos, 1);

        if (anim_step !== 1) {
            setTimeout(recursive, 10);
        }
    };

    recursive();
}

});

Используйте стили кнопки из первого примера.

Вариант 2: Кнопка "Вернуться к началу" на чистом JavaScript

Если jQuery не используется на вашем сайте, можно реализовать плавный скролл без него, используя следующий код:

window.top = {};
var sc = window.top;

sc.time = 12; // время прокрутки

sc.goTop = function (time, acceleration) {
acceleration = acceleration || 0.1;
time = time || sc.time;

var x = Math.max(window.scrollX || 0, document.body.scrollLeft || 0, document.documentElement.scrollLeft || 0);
var y = Math.max(window.scrollY || 0, document.body.scrollTop || 0, document.documentElement.scrollTop || 0);

var speed = 1 + acceleration;
window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
if (x > 0 || y > 0) {
    setTimeout(function () { sc.goTop(time); }, time);
}
return false;

}

sc.showHide = function () {
var a = document.getElementById('gotop');

if (!a) {
    var a = document.createElement('a');
    a.id = "gotop";
    a.className = "scrollTop";
    a.href = "#";
    a.style.display = "none";
    a.style.position = "fixed";
    a.style.zIndex = "9999";
    a.onclick = function (e) { e.preventDefault(); sc.goTop(); }
    document.body.appendChild(a);
}

var stop = (document.body.scrollTop || document.documentElement.scrollTop);
if (stop > 300) {
    a.style.display = 'block';
    sc.smoothopaque(a, 'show', 30, false);
} else {
    sc.smoothopaque(a, 'hide', 30, function () { a.style.display = 'none'; });
}
return false;

}

// Плавное изменение прозрачности
sc.smoothopaque = function (el, todo, speed, endFunc) {
var startop = Math.round(el.style.opacity * 100),
op = startop,
endop = (todo == 'show') ? 100 : 0;

clearTimeout(window['top'].timeout);
window['top'].timeout = setTimeout(slowopacity, 30);

function slowopacity() {
    if (startop < endop) {
        op += 5;
        if (op < endop)
            window['top'].timeout = setTimeout(slowopacity, speed);
        else
            (endFunc) && endFunc();
    } else {
        op -= 5;
        if (op > endop) {
            window['top'].timeout = setTimeout(slowopacity, speed);
        } else
            (endFunc) && endFunc();
    }

    el.style.opacity = (op / 100);
    el.style.filter = 'alpha(opacity=' + op + ')';
}

}

if (window.addEventListener) {
window.addEventListener("scroll", sc.showHide, false);
window.addEventListener("load", sc.showHide, false);
} else if (window.attachEvent) {
window.attachEvent("onscroll", sc.showHide);
window.attachEvent("onload", sc.showHide);
}

CSS с��или

CSS стили для кнопки:

.scrollTop {
background: url('path_to_file.png') 0 0 no-repeat;
width: 50px;
height: 70px;
bottom: 10px;
left: 48%;
}
.scrollTop:hover {
background-position: 0 -76px;
}

Вариант 3: Кнопка "Вернуться к началу" на jQuery

1. Подключите jQuery

Первым делом, вам нужно подключить jQuery, если его ещё нет. Для этого добавьте код в файл functions.php вашей темы:

add_action('wp_enqueue_scripts', 'my_scripts_method');
function my_scripts_method() {
wp_enqueue_script('jquery');
}

2. Вставьте код .JS

Создайте файл my_topbutton.js и вставьте следующий код:

jQuery(document).ready(function($) {
$('body').append('

');

var speed = 500,
    $scrollTop = $('').appendTo('body');

$scrollTop.click(function(e) {
    e.preventDefault();
    $('html:not(:animated),body:not(:animated)').animate({ scrollTop: 0 }, speed);
});

function show_scrollTop() {
    ($(window).scrollTop() > 300) ? $scrollTop.stop().fadeIn(600) : $scrollTop.stop().fadeOut(600);
}
$(window).scroll(function() { show_scrollTop(); });
show_scrollTop();

});

3. Настройте CSS стили

Вместо http://example.com/path_to_file.png укажите путь к вашему изображению со стрелкой. Изображение должно быть загружено на сайт, и стили должны быть настроены для него.

CSS стили без использования изображения — ещё проще!

Вот простой пример, как можно сделать кнопку без изображения, используя CSS:

$('body').append('

');

Замените соответствующие строки в коде и получите кнопку с символом стрелки.

Заключение

Теперь, следуя этим инструкциям, вы сможете легко добавить кнопку "Вернуться к началу" на свой сайт, которая будет плавно прокручивать страницу вверх при нажатии. Это улучшит пользовательский опыт и сделает ваш сайт более удобным!

Related Posts

Leave a Reply

Ваш адрес email не будет опубликован. Обязательные поля помечены *