Плавная прокрутка к элементу div при нажатии на якорную ссылку ⇐ CSS

[Anonymous]

Я создаю простой веб-сайт с двумя разделами на странице. Слева у меня будут ссылки, а справа — прокручиваемый контент. При нажатии на ссылку содержимое справа будет плавно прокручиваться до конкретного содержимого, связанного со ссылкой.
Ниже приведен код, а также jsfiddle, где у меня есть пример кода, но прокрутка отсутствует. гладко.
Пожалуйста, проверьте.

Index.html







50/50 Scrollable and Non-Scrollable
[*]






First Last
An easy way to get to know me

• About
• Experience
• Projects
• Achievements
• Academics
• Social Work
• Hobbies
• Contact

Scrollable Content



This side is scrollable.

About Me
Lorem ipsum dolor sit amet...

Experience
Lorem ipsum dolor sit amet...

Projects
Lorem ipsum dolor sit amet...

Achievements
Lorem ipsum dolor sit amet...

Academics
Lorem ipsum dolor sit amet...

Social Work
Lorem ipsum dolor sit amet...

Hobbies
Lorem ipsum dolor sit amet...

Contact
Lorem ipsum dolor sit amet...








Styles.css

body, html {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
scroll-behavior: smooth;
}

.container {
display: flex;
height: 100dvh;
}

.left-side, .right-side {
width: 50%;
padding: 20px;
box-sizing: border-box;
}

.left-side {
background-color: #f0f0f0;
overflow: hidden;
}

.right-side {
background-color: #e0e0e0;
}

.right-side h1 {
height: 3rem;
margin: 1rem;
}

.scrollable-content {
height: calc(100% - 4rem);
overflow-y: scroll;
padding-right: 20px;
box-sizing: border-box;
-ms-overflow-style: none;
scrollbar-width: none;
}

.scrollable-content::-webkit-scrollbar {
display: none; /* Hide scrollbar in Chrome, Safari, and Opera */
}


Подробнее здесь: https://stackoverflow.com/questions/787 ... nchor-link