I am making a website and I have chosen to use smooth scroll.
The smooth scrolling effect works, but if (for example) i chose to scroll down to the 'timeline' section, and then scroll back to 'home', it just stops scrolling midway through the home section. Why is this? Below you can see my webiste.
For example I have set this div as section1 (home):
<div id='section1' class="home-info">
Therefore, i thought that smoothscroll would take me to the top of that div. Turns out it only scrolls through half of it. Why is that???
*{
margin: 0;
padding: 0;
font-family: Arial, Helvetica, sans-serif;
}
html {
scroll-behavior: smooth;
}
a {
color: #AEC6CF;
underline: black;
}
.header{
height: 100px;
background: #f1f1f1;
padding: 0 20px;
color: #000000;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1030;
}
.logo{
line-height: 100px;
float: left;
position: fixed;
top: 0;
z-index: 1030;
}
.menu{
float: right;
line-height: 100px;
position: fixed;
right: 0;
top: 0;
z-index: 1030;
font-size: 20px;
}
.menu a{
color: #000000;
text-decoration: none;
padding: 0 10px;
transition: 0.4s;
}
.show-menu-btn,.hide-menu-btn{
transition: 0.4s;
font-size: 30px;
cursor: pointer;
display: none;
}
.show-menu-btn{
float: right;
}
.show-menu-btn i{
line-height: 100px;
}
.menu a:hover,
.show-menu-btn:hover,
.hide-menu-btn:hover {
color: #AEC6CF;
}
a:link, i {
color: black;
}
i:hover {
color: #AEC6CF;
transition: 0.4s;
cursor: pointer;
}
#chk{
position: absolute;
visibility: hidden;
z-index: -1111;
}
.footer {
left: 0;
bottom: 0;
width: 100%;
background-color: #f1f1f1;
color: black;
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
}
@media screen and (max-width:800px) {
.show-menu-btn,.hide-menu-btn{
display: block;
}
.menu{
position: fixed;
width: 100%;
height: 100vh;
background: #f1f1f1;
right: -100%;
top: 0;
text-align: center;
padding: 80px 0;
line-height: normal;
transition: 0.7s;
}
.menu a{
display: block;
padding: 20px;
}
.hide-menu-btn{
position: absolute;
top: 40px;
right: 40px;
}
#chk:checked ~ .menu{
right: 0;
}
.footer {
left: 0;
bottom: 0;
width: 100%;
background-color: #f1f1f1;
color: black;
text-align: center;
padding-top: 25px;
padding-bottom: 25px;
padding-left: 10px;
padding-right: 10px;
}
.header {
height: 103.5px;
}
.header-info h2 {
font-size: 20px;
margin-top: 350px;
}
.header-info h1 {
font-size: 30px;
}
}
* {
box-sizing: border-box;
}
body {
background-color: #fff;
font-family: Helvetica, sans-serif;
}
/* The actual timeline (the vertical ruler) */
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;
}
/* The actual timeline (the vertical ruler) */
.timeline::after {
content: '';
position: absolute;
width: 4px;
background-color: black;
top: 0;
bottom: 0;
left: 50%;
margin-left: -1.2px;
}
/* Container around content */
.container {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}
.header-container {
width: 100%;
position: relative;
background-color: inherit;
padding: 10px 40px;
}
/* The circles on the timeline */
.container::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -17px;
background-color: white;
border: 4px solid #AEC6CF;
top: 15px;
border-radius: 50%;
z-index: 1;
}
/* Place the container to the left */
.left {
left: 0;
}
/* Place the container to the right */
.right {
left: 50%;
}
/* Add arrows to the left container (pointing right) */
.left::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
right: 30px;
border: medium solid white;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
}
/* Add arrows to the right container (pointing left) */
.right::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;
z-index: 1;
left: 30px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* Fix the circle for containers on the right side */
.right::after {
left: -16px;
}
/* The actual content */
.content {
padding: 20px 30px;
background-color: #f1f1f1;
position: relative;
border-radius: 6px;
transition: 0.4s;
}
/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
/* Place the timelime to the left */
.timeline::after {
left: 31px;
}
/* Full-width containers */
.container {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}
/* Full-width containers */
.header-container {
width: 100%;
padding-left: 25px;
padding-right: 25px;
}
/* Make sure that all arrows are pointing leftwards */
.container::before {
left: 60px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}
/* Make sure all circles are at the same spot */
.left::after, .right::after {
left: 15px;
}
/* Make all right containers behave like the left ones */
.right {
left: 0%;
}
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet' href='style.css'>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
</head>
<body>
<title>lunAr-creator</title>
<div class="header" id='pronav'>
<div class='logo' id='logo'>
<h1>lunAr-creator</h1>
</div>
<input type="checkbox" id="chk">
<label for="chk" class="show-menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul class="menu" id='navbar'>
<a href="#section1" onclick="document.getElementById('chk').checked = false">Home</a>
<a href="#section2" onclick="document.getElementById('chk').checked = false">About</a>
<a href="#section3" onclick="document.getElementById('chk').checked = false">Timeline</a>
<a href="#section4" onclick="document.getElementById('chk').checked = false">Projects</a>
<a href="#section5" onclick="document.getElementById('chk').checked = false">Useful Links</a>
<label for="chk" class="hide-menu-btn">
<i class="fas fa-times"></i>
</label>
</ul>
</div>
<div style="margin-top:120px">
<div id='section1' class="home-info">
<h2 style='text-align:center;margin-top:350px;font-size:28px;'>Hi there. I'm lunAr-creator!</h2>
<h1 style='text-align:center;padding-top:20px;font-size:40px;love {color:#AEC6CF}'>& I love programming</h1>
<h3 style='text-align:center;padding-top:30px;padding-bottom:480px;'>Projects<a href="#section4"><i class="fas fa-chevron-down" style='margin-left:20px;'></i></a></h3>
</div>
<div class='header-container'>
<div id="section3" class="content">
<h2>About<i style='margin-left:20px;color:#AEC6CF;cursor:default;' class="fas fa-address-card"></i></h2>
<p>This is where i will talk about who I am and what i do :D</p>
</div>
</div>
<div class='header-container'>
<div class="content">
<h2>Timeline<i style='margin-left:20px;color:#AEC6CF;cursor:default;padding-bottom:0px;' class="fas fa-child"></i></h2>
<p>The stages I have been through so far with programming.</p>
</div>
</div>
<br></br>
<div class="timeline">
<div class="container right">
<div class="content">
<h2>2016 - 17</h2>
<p>I joined a Scratch coding camp where I learnt some of the foundations of programming.</p>
<br></br>
<p>My Dad built on the knowledge I had already aquired from the course and used C# to teach us some new concepts.</p>
</div>
</div>
<div class="container left">
<div class="content">
<h2>2018-19</h2>
<p>My school introduced me to HTML and CSS where i made my first website - a Minecraft handbook. I started learning Python aswell after it being recommended to me.</p>
<p>Watched a couple of Youtube tutorials on Python, started applying them to small programs and building up my skills.</p>
<br></br>
<p>Made my first (text-based) game called '9-lives'. Used the book: 'Python in easy steps' to help me understand the logic behind it.</p>
</div>
</div>
<div class="container right">
<div class="content">
<h2>2020</h2>
<p>Had lots of spare time on my hands due to Covid. Made some projects such as pong, a simple email client using smtplib, tkinter for the UI and made my second website.</p>
<br></br>
<p>Developed and hosted (and is still hosting) a website for a youth group. I used HTML, CSS and a little Javascript to accomplish this.</p>
<a style='color: #AEC6CF' href="https://a-town-youth.netlify.app">Click here to visit the youth group website</a>
</div>
</div>
<div class="container left">
<div class="content">
<h2>2021</h2>
<p>Created a text-based adventure rpg game for beginners to contribute to (including me). In my opinion it improved my team-working/collaboration skills and helped me learn some new concepts looking at other people code.</p>
<br></br>
<p>Joined GitHub :D </p>
<a style='color: #AEC6CF' href="https://github.com/lunAr-creator">Click here to visit my GitHub</a>
<br></br>
<p>Made my first library (pw-gen) for generating strong randomised passwords.</p>
</div>
</div>
</div>
<br></br>
<div id='section4' class='header-container'>
<div class="content">
<h2>Projects<i style='margin-left:20px;color:#AEC6CF;cursor:default;' class="fas fa-code-branch"></i></h2>
<p>All of my projects are up on my GitHub profile so be sure to check them out</p>
</div>
</div>
<div id='section5' class='header-container'>
<div class="content">
<h2>Useful Links<i style='margin-left:20px;color:#AEC6CF;cursor:default;' class="fas fa-link"></i></h2>
<p>Links to websites and resources that I find helpful whilst I am programming</p>
</div>
</div>
<div id='section6' class='header-container'>
<div class="content">
<h2>Contact<i style='margin-left:20px;color:#AEC6CF;cursor:default;' class="fas fa-pen"></i></h2>
<p>Contact me here for information or collaboration requests</p>
</div>
</div>
<div class='footer'>
<a href="https://github.com/lunAr-creator"><i class="fab fa-github" style='font-size:30px;margin-right:20px;'></i></a>
<a href="https://stackoverflow.com/users/15277679/lunar-creator?tab=profile"><i class="fab fa-stack-overflow" style='font-size:30px'></i></a>
<br></br>
<p>Copyright © 2021 lunAr-creator - Website Design by me (who else? :D)</p>
</div>
</div>
</body>
</html>