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

Компонент, который мы создадим, вероятно, более прост в использовании (не требуется Anchor-Tag, только кнопка). Кроме того, вы можете установить смещение по своему усмотрению для каждой кнопки. Мы просто передадим Props и напишем функциональность прокрутки в Vanilla JS.

Давайте начнем

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

<ScrollButton className={'btn'} title={'Three'} id={contentKeyThree} offset={50}/>

Давайте создадим фактический Component. Мы начнем с рендеринга кнопки и деструктурирования наших реквизитов.

import React, { Component } from 'react';
export default class ScrollButton extends Component {
render (){
        const { title, id, className, offset } = this.props;
        return (
            <button className={className}>{title}</button>
        )};
    }

На данный момент это многоразовая универсальная кнопка. Пока все хорошо, но давайте сделаем его немного интереснее и добавим Scroll-Functionality. Основная идея состоит в том, чтобы получить позицию элемента, до которой мы хотим прокрутить, и при нажатии кнопки позволить окну браузера прокрутить до этой позиции за вычетом заданного смещения. Для этого воспользуемся двумя функциями.

element.getBoundingClientRect() // returns an Object that shows the position of the Element
window.scroll(x-Position,y-Position) // let the window scroll to a given Position

При нажатии кнопки мы будем искать элемент, к которому хотим прокрутить, используя ключ (определенный через HTML), который поступает из Props. Затем мы сохраним y-Position этого элемента и переведем окно в эту позицию за вычетом offset-prop.

scrollButton(id, plus){
    const element = document.getElementById(id);
    const postitionOfElement = element.getBoundingClientRect()
    const yPosition = postitionOfElement.top
    window.scroll({top: (yPosition-plus), behavior: 'smooth'})
}

Чтобы запустить эту функцию, просто добавьте к кнопке onClick Event-Listener, и все готово. Мы хотим добавить свойство поведения в функцию прокрутки, чтобы браузер мог прокручиваться плавно.

Найдите полный код на Github с полным примером кнопок в действии. https://github.com/mixbened/react-reusable-scrollButton

Надеюсь, вам понравилось это краткое руководство. Не стесняйтесь сообщать мне об ошибках.