Html Question posted in
Some basic documentation can be found here.

Html – Smooth scrolling to the div when clicking on anchor link

I am creating a simple website with two sections on the page. On left side I will have links and on right side the content in scrollable way. On click of link the content on right will scroll to the specific content related to the link smoothly.

Below is the code and also jsfiddle where I have the sample code but the scrolling isn’t smooth.
Please check.

Index.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>

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 */
}
Tags:

3

Answers


  1. 0

    Its probably the height: 100dvh; property. Try removing it and test

    Login or Signup to reply.
  2. 0

    your scroll-behavior : smooth; is at a wrong place
    move it to .scrollable-content { in your 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>
    Login or Signup to reply.
  3. 0

    change your css atrribute like this
    And also add .section and 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);}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search