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

Есть 4 кнопки — "Заказать сейчас" (4 разных цвета позиции). При нажатии на любую кнопку, переходим к форме заказа. Там есть выпадающий список (выбор цвета), цвет по умолчанию (допустим синий), но карточек 4 (4 разных цвета соответственно). Как сделать чтобы при нажатии кнопки, под карточкой с красным цветом, мы опускались вниз к форме, и в выпадающем списке менялся цвет на красный соответственно ?


выпадающий список


Ответы (1 шт):

Автор решения: VladykoD

Добавь дата-атрибут с цветом к пункту списка (чтобы окрашивать в него после клика) и дата-атрибут с id нужной карточки, для карточек тоже data-id завести. После того, как верстка загрузилась на страницу (load_event), тебе нужно вычислять offsetTop для каждой карточки и где-то в js сохранять (например, в массиве или объекте). При клике на кнопку смотришь id, ищешь нужный элемент в массиве и скроллишь до него через Window.scroll().

Если вообще не понимаешь с чего начать, разбивай задачу на 2: перекраска и скролл. На codepen.io находишь примеры, адаптируешь под себя.

Чтобы давать более подробные советы, тебе нужно предоставить код. Если ничего нет, то попробуй сделать по описанию, поищи в гугле по ключевым словам. Сделай какую-то демку и возвращайся, переоткрывай вопрос.

→ Ссылка