Как добавить кнопку «Вверх» в статьи базы знаний

Последние изменения: 11.10.2023

В объемных статьях сложно ориентироваться, когда вы хотите подробно рассказать о предмете. Зачастую нужно перейти к предыдущем заголовку или вовсе прокрутить в самое начало, чтобы посмотреть описание. Эту задачу решает плавающая кнопка «Вверх».

Как создать кнопку

Подобные зачади решаются с помощью кастомного CSS и JS-скрипта. В каждой статье появится иконка в левом нижнем углу. По клику на нее пользователя перенесет на последний якорь. Если кликнуть дважды — в начало статьи.

1. Кастомный CSS кнопки «Вверх»

Перейдите по пути аккаунт администратора → раздел «Центр поддержки» → подраздел «Персонализация» → блок «дизайн центра поддержки» и в поле «Кастомный CSS» добавьте следующие стили:

#btnUpArticle {
    position: fixed;
    bottom: 35px;
    left: 35px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #e0e0e0;
    opacity: 0.35 !important;
    cursor: pointer;
    padding: 10px 12.5px;
    border-radius: 6px;
    font-size: 25px;
    transition: all .3s ease-in-out;
    text-align: center;
}
#btnUpArticle::before {
    color: #fff;
    font-family: "Font Awesome 6 Pro";
    content: "\f0aa";
    font-weight: 650;
}
#btnUpArticle:hover {
    background-color: #01ba087d;
    opacity: 1 !important;
}

2. JS-скрипт

Выберите, как вы хотите добавлять кнопку «Вверх»:

— выборочно для определенных статей;

— автоматически для всех статей.

Добавлять кнопку «Вверх» выборочно

Перейдите по пути аккаунт администратора → раздел «Центр поддержки» → подраздел «Персонализация» → блок «виджеты и скрипты» и в поле «Сторонние скрипты» добавьте скрипт, внеся его в теги script:

<script>
let lastClickTime = 0;
let hasScrolled = false;

const btnUpArticle = document.getElementById("btnUpArticle");

if (btnUpArticle) {
    const scrollUp = () => {
        const headings = document.querySelectorAll("[data-scroll-id]");
        const scrollPosition = window.scrollY;

        for (let i = headings.length - 1; i >= 0; i--) {
            const heading = headings[i];
            const headingTop = heading.getBoundingClientRect().top + scrollPosition;

            if (headingTop < scrollPosition) {
                heading.scrollIntoView({ behavior: "smooth" });
                return;
            }
        }

        const article = document.querySelector('.kb-article-content.clearfix');
        article.scrollIntoView({ behavior: "smooth" });
    };

    window.scrollButton = function() {
        const currentTime = new Date().getTime();
        const timeSinceLastClick = currentTime - lastClickTime;
        lastClickTime = currentTime;

        if (timeSinceLastClick < 300) {
            window.scrollTo({ top: 0, behavior: "smooth" });
        } else {
            scrollUp();
        }
    };

    const handleScroll = () => {
        const scrollPosition = window.scrollY;
        const article = document.querySelector('.kb-article-content.clearfix');

        if (scrollPosition > article.offsetTop) {
            btnUpArticle.style.display = "block";
        } else {
            btnUpArticle.style.display = "none";
        }
    };

    document.addEventListener("DOMContentLoaded", () => {
        const articles = document.querySelectorAll('.kb-article-content.clearfix');

        articles.forEach((article, index) => {
            btnUpArticle.onclick = scrollButton;
            btnUpArticle.style.display = "none";

            const shouldAppendAsFirst = true;
            if (shouldAppendAsFirst) {
                article.prepend(btnUpArticle);
            } else {
                article.appendChild(btnUpArticle);
            }
        });

        window.addEventListener("scroll", handleScroll);
    });
}
</script>

Чтобы добавить иконку в определенную статье, перейдите в исходный код и добавьте следующий html-тег:

<button id="btnUpArticle"></button>

Добавлять кнопку «Вверх» автоматически для всех статей

Перейдите по пути аккаунт администратора → раздел «Центр поддержки» → подраздел «Персонализация» → блок «виджеты и скрипты» и в поле «Сторонние скрипты» добавьте скрипт, внеся его в теги script:

<script>
let lastClickTime = 0;
let hasScrolled = false;
let scrollTimeout;

const scrollUp = () => {
    const headings = document.querySelectorAll("[data-scroll-id]");
    const scrollPosition = window.scrollY;

    for (let i = headings.length - 1; i >= 0; i--) {
        const heading = headings[i];
        const headingTop = heading.getBoundingClientRect().top + scrollPosition;

        if (headingTop < scrollPosition) {
            heading.scrollIntoView({ behavior: "smooth" });
            return;
        }
    }

    if (hasScrolled) {
        window.scrollTo({ top: 0, behavior: "smooth" });
    } else {
        const article = document.querySelector('.kb-article-content.clearfix');
        const articleTop = article.getBoundingClientRect().top + scrollPosition;
        window.scrollTo({ top: articleTop, behavior: "smooth" });
    }
};

window.scrollButton = function() {
    const currentTime = new Date().getTime();
    const timeSinceLastClick = currentTime - lastClickTime;
    lastClickTime = currentTime;

    if (timeSinceLastClick < 300) {
        window.scrollTo({ top: 0, behavior: "smooth" });
        hasScrolled = false;
    } else {
        scrollUp();
        hasScrolled = true;
        clearTimeout(scrollTimeout);
        scrollTimeout = setTimeout(() => {
            hasScrolled = false;
        }, 1000);
    }
};

const handleScroll = () => {
    const scrollPosition = window.scrollY;
    const article = document.querySelector('.kb-article-content.clearfix');
    
    if (!hasScrolled && scrollPosition > article.offsetTop) {
        document.getElementById("btnUpArticle").style.display = "block";
    }
};

document.addEventListener("DOMContentLoaded", () => {
    const articles = document.querySelectorAll('.kb-article-content.clearfix');
    
    articles.forEach((article, index) => {
        const button = document.createElement("button");
        button.onclick = scrollButton;
        button.id = "btnUpArticle";
        button.style.display = "block"; 

        const shouldAppendAsFirst = true;
        if (shouldAppendAsFirst) {
            article.prepend(button);
        } else {
            article.appendChild(button);
        }
    });

    window.addEventListener("scroll", handleScroll);
});
</script>

В результате в статьях появится HTML-тег, который поможет отобразить иконку:

<button id="btnUpArticle" style="display: block;"></button>

Помогла ли вам статья?