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

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

Ниже приведен код, а также jsfiddle, где у меня есть пример кода, но прокрутка не плавная. Пожалуйста, проверьте.

Индекс.html

<!-- index.html -->
<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
    <title>50/50 Scrollable and Non-Scrollable</title>
    <link rel = "stylesheet" href = "styles.css">
</head>
<body>
    <div class = "container">
        <div class = "left-side">         
            <div class = "left-content">
                <div class = "left-inner">
                    <h1>First Last</h1>
                    <p>An easy way to get to know me</p>
                </div>
            </div>
            <nav>
                <ul>
                    <li><a href = "#intro">About</a></li>
                    <li><a href = "#work">Experience</a></li>
                    <li><a href = "#projects">Projects</a></li>
                    <li><a href = "#achievements">Achievements</a></li>
                    <li><a href = "#academics">Academics</a></li>
                    <li><a href = "#socialwork">Social Work</a></li>
                    <li><a href = "#hobbies">Hobbies</a></li>
                    <li><a href = "#contact">Contact</a></li>
                </ul>
            </nav>
        </div>
        <div class = "right-side">
            <div class = "right-content">
                <div class = "right-inner">
                    <h1>Scrollable Content</h1>
                </div>
            </div>            
            <div class = "scrollable-content">
                <p>This side is scrollable.</p>
                <div id = "intro">
                    <h2 class = "major">About Me</h2>
                    <p>Lorem ipsum dolor sit amet...</p>
                </div>
                <div id = "work">
                    <h2 class = "major">Experience</h2>
                    <p>Lorem ipsum dolor sit amet...</p>
                </div>
                <div id = "projects">
                    <h2 class = "major">Projects</h2>
                    <p>Lorem ipsum dolor sit amet...</p>
                </div>
                <div id = "achievements">
                    <h2 class = "major">Achievements</h2>
                    <p>Lorem ipsum dolor sit amet...</p>
                </div>
                <div id = "academics">
                    <h2 class = "major">Academics</h2>
                    <p>Lorem ipsum dolor sit amet...</p>
                </div>
                <div id = "socialwork">
                    <h2 class = "major">Social Work</h2>
                    <p>Lorem ipsum dolor sit amet...</p>
                </div>
                <div id = "hobbies">
                    <h2 class = "major">Hobbies</h2>
                    <p>Lorem ipsum dolor sit amet...</p>
                </div>
                <div id = "contact">
                    <h2 class = "major">Contact</h2>
                    <p>Lorem ipsum dolor sit amet...</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Стили.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 */
}

Этот вопрос похож на: Как анимировать прокрутку вверх в JavaScript. Если вы считаете, что это другое, отредактируйте вопрос, поясните, чем он отличается и/или как ответы на этот вопрос не помогают решить вашу проблему.

— 07.07.2024 19:15

Другое дело, что я не использую JS и не пытаюсь прокручивать страницу вверх. Мне помог один из ответов, который я отметил. Благодарю за ваш ответ

— 08.07.2024 16:48

javascript html css

07.07.2024 19:02

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

твой scroll-behavior : smooth; не на том месте
переместите его в .scrollable-content { в своем CSS

body, html {
  margin             : 0;
  padding            : 0;
  font-family        : Arial, sans-serif;
  }
.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;
  scroll-behavior    : smooth;     /* here */
  }
.scrollable-content::-webkit-scrollbar {
  display            : none;  /* Hide scrollbar in Chrome, Safari, and Opera */
  }

<div class = "container">
  <div class = "left-side">
    <div class = "left-content">
      <div class = "left-inner">
        <h1>First Last</h1>
        <p>An easy way to get to know me</p>
      </div>
    </div>
    <nav>
      <ul>
        <li><a href = "#intro">About</a></li>
        <li><a href = "#work">Experience</a></li>
        <li><a href = "#projects">Projects</a></li>
        <li><a href = "#achievements">Achievements</a></li>
        <li><a href = "#academics">Academics</a></li>
        <li><a href = "#socialwork">Social Work</a></li>
        <li><a href = "#hobbies">Hobbies</a></li>
        <li><a href = "#contact">Contact</a></li>
      </ul>
    </nav>
  </div>
  <div class = "right-side">
    <div class = "right-content">
      <div class = "right-inner">
        <h1>Scrollable Content</h1>
      </div>
    </div>
    <div class = "scrollable-content">
      <p>This side is scrollable.</p>
      <div id = "intro">
        <h2 class = "major">About Me</h2>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
      <div id = "work">
        <h2 class = "major">Experience</h2>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
      <div id = "projects">
        <h2 class = "major">Projects</h2>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
      <div id = "achievements">
        <h2 class = "major">Achievements</h2>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
      <div id = "academics">
        <h2 class = "major">Academics</h2>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
      <div id = "socialwork">
        <h2 class = "major">Social Work</h2>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
      <div id = "hobbies">
        <h2 class = "major">Hobbies</h2>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
      <div id = "contact">
        <h2 class = "major">Contact</h2>
        <p>Lorem ipsum dolor sit amet...</p>
      </div>
    </div>
  </div>
</div>

07.07.2024 19:30

измените свой атрибут CSS следующим образом А также добавьте .section иsection:target.

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

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

.section {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s, transform 0.6s;}

.section:target {
    opacity: 1;
    transform: translateY(0);}

Ваш ответ можно улучшить, добавив дополнительную вспомогательную информацию. Пожалуйста, отредактируйте , добавив дополнительную информацию, например цитаты или документацию, чтобы другие могли подтвердить правильность вашего ответа. Более подробную информацию о том, как писать хорошие ответы, вы можете найти в справочном центре.

— 07.07.2024 22:20

07.07.2024 20:02