Возможно ли сделать так, чтобы при нажатии на кнопку (ссылку) она вела к определённому месту в лендинге?

Question

Возможно ли сделать так, чтобы при нажатии на кнопку (ссылку) она вела к определённому месту в лендинге? То бишь чтобы при нажатии на кнопку происходила прокрутка страницы до определённого места.

Answer 1

Для начала вам надо добавить в вашу разметку якорные ссылки.

Первое для этого надо в месте куда надо прокрутить страницу добавить id:

id = "Ваш_id"

Второе для этого надо добавить ссылку на ваш блок это делается с помощью id который вы задали ранее:

href="#Ваш_id"

И последний шаг добавить плавность, для этого в файле вашиъ стилей надо добавить следующее свойство для всего html:

scroll-behavior: smooth;

*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

a {
    color: white;
    text-decoration: none;
}

section.header,
section.content1,
section.content2,
section.content3 {
    width: 100%;
    height: 100vh;
}
section.header {
    background-color: #f1c40f;
}
section.content1 {
    background-color: #2ecc71;
}
section.content2 {
    background-color: #8e44ad;
}
section.content3 {
    background-color: #e74c3c;
}
.menu {
    position: fixed;
    display: flex;
    width: 100%;
    list-style: none;
    padding: 10px 20px;
    background-color: black;
}

.menu-item {
    padding: 0 20px;
}

<body class="main">
    <section class="header">
        <ul class="menu">
            <li class="menu-item">
                <a href="#content1" class="link">Ссылка 1</a>
            </li>
            <li class="menu-item">
                <a href="#content2" class="link">Ссылка 2</a>
            </li>
            <li class="menu-item">
                <a href="#content3" class="link">Ссылка 3</a>
            </li>
        </ul>
    </section>
    <section id="content1" class="content1"></section>
    <section id="content2" class="content2"></section>
    <section id="content3" class="content3"></section>

</body>

БЛОГ НА HUSL

Возможно ли сделать так, чтобы при нажатии на кнопку (ссылку) она вела к определённому месту в лендинге?

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