below is the code for both html and css. Please I really need help with this issue and I want a solution why the scrolling effect is not working after i tried using html{ scroll-behavior: smooth; }.....I have tried also to use some java script short codes but it is still not working. I have designed it to scroll to a specific part of the page after clicking on the menu headings
<html lang="en">
<head>
<title> Anetin Super Structures</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="images/logo (1).png">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css2?family=Kaushan Script&family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
<!--home section-->
<section id="coverphoto">
<img src="images/logomah.png" >
<div >
<h1 >Anetin Super Structures</h1>
<p >Engineering your dreams with us</p>
<div >
<a href="#"><span></span> Find Out</a>
<a href="#"><span></span> Read More</a>
</div>
</div>
</section>
<div id="sideNav">
<nav>
<ul>
<li><a href="#coverphoto"></a>HOME</li>
<li><a href="#features"></a>FEATURES</li>
<li><a href="#services"></a>SERVICES</li>
<li><a href="#testimonial"></a>TESTIMONIALS</li>
<li><a href="#footer"></a>ABOUT US</li>
</ul>
</nav>
</div>
<div id="menuBtn">
<img src="/images/menu-button.png" id="menu" >
</div>
<!--features sections-->
<section id="features">
<div >
<p>FEATURES</p>
<h1>Why Choose Us</h1>
</div>
<div >
<div >
<h1>Experienced Stuff</h1>
<div >
<div >
<i ></i>
</div>
<div >
<p>How we do it! On large scale construction our Architects normally manages the job with a construction manager and a design engineer supervising it.</p>
</div>
</div>
<h1>Pre Booking Online</h1>
<div >
<div >
<i ></i>
</div>
<div >
<p>How we do it! On large scale construction our Architects normally manages the job with a construction manager and a design engineer supervising it.</p>
</div>
</div>
<h1>Affordable Cost</h1>
<div >
<div >
<i ></i>
</div>
<div >
<p>In every services that we offer we also make sure that they have affordable costs with quality work</p>
</div>
</div>
</div>
<div >
<img src="images/feature.jpeg" >
</div>
</div>
</section>
<!--services section-->
<section id="services">
<div >
<p>SERVICES</p>
<h1>We Provide Better</h1>
</div>
<div >
<div >
<img src="images/buildingN.jpeg">
<div ></div>
<div >
<h3>Construction</h3>
<hr>
<p></p>
</div>
</div>
<div >
<img src="images/electrical eng.jpeg" >
<div ></div>
<div >
<h3>Electrical Engineering</h3>
<hr>
<p></p>
</div>
</div>
<div >
<img src="images/Painting.jpeg" >
<div ></div>
<div >
<h3>Wall Painting</h3>
<hr>
<p>We pair you up with the ideal artist for your project. From wall paintings to wall art ideas for your office or homes - the ideas are endless.</p>
</div>
</div>
<div >
<img src="images/pumblingN.jpeg" >
<div ></div>
<div >
<h3>Pumbling</h3>
<hr>
<p> We install, check, and replace fixtures in your home or commercial property to ensure that you obtain high-quality service and materials. Toilets, kitchen and bathroom sinks etc.</p>
</div>
</div>
<div >
<img src="images/engineeringdrawings.jpeg" >
<div ></div>
<div >
<h3>Engineering Drawings</h3>
<hr>
<p></p>
</div>
</div>
<div >
<img src="images/roofing.jpeg" >
<div ></div>
<div >
<h3>Roofing</h3>
<hr>
<p>Custom Roofs, Ceiling, Material, Installation, Supply and Manufacturing by our professional engineers</p>
</div>
</div>
</div>
</section>
<!--end of services section-->
<!--testimonial section-->
<section id="testimonial">
<div >
<p>TESTIMONIALS</p>
<h1>What Client Says</h1>
</div>
<div >
<div >
<div >
<img src="images/tatenda.jfif">
<div >
<h4>TATENDA CHIKOMA <i ></i></h4>
<small>@taibo87</small>
</div>
</div>
<p>To say we're happy would be an understatement. When Anetin Team builds a home for you, they'll build it with care as if they were doing it for themselves and their families. Anetin Team would definitely be the one to build our next home in Southley Park, Harare.</p>
</div>
<div >
<div >
<img src="images/nyasha.jfif">
<div >
<h4> NYASHA MUGANHIRE<i ></i></h4>
<small>@nyaash_16!</small>
</div>
</div>
<p>I love this company. Very easy to talk to them and they really know how to save money and do quality stuff. Anetin Super Structures were great to work with, they did a complete remodel of our kitchen and two bathrooms providing best ceiling fitting and repairing the damaged water system. </p>
</div>
<div >
<div >
<img src="images/lorraine.jpg">
<div >
<h4>LORRAINE MHASHU <i ></i></h4>
<small>@lolo30_</small>
</div>
</div>
<p>If you need a new roof please do yourself a favour and get in touch with Anetin Super Structures. I can't say enough how awesome it was working with Anetin, they made the entire roofing beautifully i'm always grateful. </p>
</div>
</div>
</section>
<!--end of testimonial section-->
<!--footer section-->
<section id="footer">
<img src="images/brick layering.jpg" >
<div >
<p>CONTACT</p>
<h1>Visit Shop Today</h1>
</div>
<div >
<div >
<h1>Opening Hours</h1>
<p><i ></i>Monday to Friday - 8am to 5pm</p>
<p><i ></i>Saturday and Sunday - 9am to 3pm</p>
</div>
<div >
<h1>Get In Touch</h1>
<p>7329 Limpopo Rd Zimre Park, Zimbabwe<i ></i></p>
<p>[email protected]</p>
<p><i ></i> 263 77 448 7726</p>
</div>
</div>
<div >
<i ></i>
<i ></i>
<i ></i>
<i ></i>
<p>© 2022 Anetin Super Structures. All Rights Reserved</p>
</div>
</section>
<!--end of footer section-->
<script>
var menuBtn = document.getElementById("menuBtn")
var sideNav = document.getElementById("sideNav")
var menu = document.getElementById("menu")
sideNav.style.right== "-250px"
menuBtn.onclick= function(){
if(sideNav.style.right== "-250px"){
sideNav.style.right= "0";
menu.src="/images/cancel.png";
}
else{
sideNav.style.right="-250px";
menu.src="/images/menu-button.png"
}
}
</script>
</body>
</html>
/*CSS*/
*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
html{
scroll-behavior: smooth;
}
#coverphoto{
background: linear-gradient(rgba(0,0,0,0.5),#967300),url(../images/cover.jpeg);
background-size: cover;
background-position: center;
height: 100vh;
}
.logo{
width: 140px;
position: absolute;
top: 4%;
left: 10%;
}
.banner-text{
text-align: center;
color: #fff;
padding-top: 180px;
}
.banner-text h1{
font-size: 130px;
font-family: 'Kaushan Script', cursive;
animation: anim 2s;
}
.banner-text p{
font-size: 20px;
font-style: italic;
font-weight: 100;
animation: anim 1.5s .5s backwards;
}
@keyframes anim{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.banner-btn{
margin: 70px auto;
animation: anim 2s .8s backwards;
}
.banner-btn a{
width: 150px;
text-decoration: none;
display: inline-block;
margin: 0 10px;
padding: 12px 0;
color: #fff;
border: .5px solid #fff;
position: relative;
z-index: 1;
transition: color .5s;
}
.banner-btn a span{
width: 0%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: #fff;
z-index: -1;
transition: .5s;
}
.banner-btn a:hover span{
width: 100%;
}
.banner-btn a:hover{
color: black;
}
#sideNav{
width: 250px;
height: 100vh;
position: fixed;
right: -250px;
top: 0;
background: #967300;
z-index: 2;
transition: .5s;
}
nav ul li{
list-style: none;
margin: 50px 20px;
color: #fff;
cursor: pointer;
}
nav ul li a {
text-decoration: none;
}
#menuBtn{
width: 30px;
height: 25px;
background: #967300;
text-align: center;
position: fixed ;
right: 50px;
top: 30px ;
border-radius: 3px;
z-index: 3;
cursor: pointer;
}
.menu-btn img{
width: 20px;
margin-top: 15px;
}
@media screen and (max-width: 770px) {
.banner-text h1{
font-size: 44px;
}
.banner-btn a{
display: block;
margin: 20px auto;
}`enter code here`
}
/* features*/
#features{
width: 100%;
padding: 70px 0;
}
.title-text{
text-align: center;
padding-bottom: 70px;
}
.title-text p{
margin: auto;
font-size: 20px;
color: #ddb01d;
font-weight: bold;
position: relative;
z-index: 1;
display: inline-block;
}
.title-text p::after{
content: '';
width: 50px;
height: 35px;
background: linear-gradient(#ddb01d, #fff) ;
position: absolute;
top: -20px;
left: 0;
z-index: -1;
transform: rotate(10deg);
border-top-left-radius: 35px;
border-bottom-right-radius: 35px;
}
.title-text h1{
font-size: 50px;
}
.feature-box{
width: 80%;
margin:auto ;
display: flex;
flex-wrap: wrap ;
align-items: center;
text-align: center;
}
.features{
flex-basis: 50%;
}
.features-img{
margin: auto;
flex-basis: 50%;
}
.features-img img{
width: 70%;
border-radius: 10px;
}
.features h1{
text-align: left;
margin-bottom: 10px;
font-weight: 100;
color: #967300;
}
.features-desk{
display: flex;
align-items: center;
margin-bottom: 40px;
}
.features-icon .fa{
width: 50px;
height: 50px;
font-size: 30px;
line-height: 50px;
border-radius: 8px;
color: #967300;
border: 1px solid #967300;
}
.features-text p{
padding: 0 20px;
text-align: initial;
}
@media screen and (max-width: 770px) {
.title-text h1{
font-size: 35px;
}
.features{
flex-basis: 100%;
}
.features-img{
flex-basis: 100%;
}
.features-img img{
width: 100%;
}
}
#services{
width: 100%;
padding: 70px 0;
background: #efefef;
}
.service-box{
width: 80%;
display: flex;
flex-wrap: wrap;
justify-content: space-around ;
margin: auto;
}
.single-service{
flex-basis: 48%;
text-align: center;
border-radius: 7px;
margin-bottom: 20px;
color: #fff;
position: relative;
}
.single-service img{
width: 100%;
border-radius: 7px;
}
.overlay{
width: 100%;
height: 100%;
position: absolute;
top: 0;
border-radius: 7px;
cursor: pointer;
background: linear-gradient(rgba(0,0,0,0.5), #967300);
opacity: 0;
transition: 1s;
}
.single-service:hover .overlay{
opacity: 1;
}
.service-descrip{
bottom: 0;
left: 50%;
width: 80%;
position:absolute;
transform: translateX(-50%);
opacity: 0;
transition: 1s;
}
hr{
background: #fff;
height:2px ;
border: 0;
margin: 15px auto;
width: 60%;
}
.service-descrip p{
font-size: 14px;
}
.single-service:hover .service-descrip{
bottom: 40%;
opacity: 1;
}
@media screen and (max-width: 770px) {
.single-service{
flex-basis: 100%;
margin-bottom: 30px;
}
.service-descrip p{
font-size: 12px;
}
hr{
margin: 5px auto;
}
.single-service:hover .service-descrip{
bottom: 25% !important;
}
}
#testimonial{
width: 100%;
padding: 70px 0;
}
.testimonial-row{
width: 80%;
margin: auto;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
.testimonial-column{
flex-basis: 28%;
padding: 10px ;
margin-bottom: 30px;
border-radius: 5px ;
box-shadow: 0 10px 20px 3px #00968814;
cursor: pointer;
transition: transform .5s;
}
.testimonial-column p{
font-size: 14px;
}
.user{
display: flex;
margin: 2px 0px;
align-items: center;
}
.user img{
width: 40px;
margin-right: 20px;
border-radius: 3px;
}
.user-info .fa{
margin-left: 10px;
color: #27c0ff;
font-size: 20px;
}
.user-info small{
color: #009688;
}
.testimonial-column:hover{
transform: translateY(-7px);
}
@media screen and (max-width: 770px){
.testimonial-column{
flex-basis: 100%;
}
}
#footer{
padding: 100px 0 20px;
background: #efefef;
position: relative;
}
.footer-row{
width: 80%;
margin: 0 auto;
display: flex ;
justify-content: space-between;
flex-wrap: wrap;
}
.footer-left, .footer-right{
padding: 10px;
margin-bottom: 20px ;
flex-basis: 45% ;
}
.footer-right{
text-align: right;
}
.footer-row h1{
margin: 10px 0;
}
.footer-row p{
line-height: 35px;
}
.footer-left .fa, .footer-right .fa{
font-size: 20px;
color: #967300;
margin: 10px;
}
.footer-img{
max-width: 370px;
opacity: 0.1;
position:absolute;
left: 50%;
top: 35%;
transform: translate(-50%, -50%);
}
.social-links{
text-align: center;
}
.social-links .fa{
height: 40px;
width: 40px;
font-size: 20px;
line-height: 40px;
border: 1px solid #967300;
margin: 40px 5px 0;
transition: .5s;
}
.social-links .fa:hover{
background: #967300;
color: #fff;
transform: translateY(-7px);
cursor: pointer;
}
.social-links p{
font-size: 12px;
margin-top: 20px;
}
@media screen and (max-width: 770px){
.footer-left, .footer-right{
flex-basis: 100%;
font-size: 14px;
}
.footer-img{
top: 25%;
}
}
CodePudding user response：
I think you must ad scroll-behavior: smooth; to body selector!
CodePudding user response：
You can try this:
// anhor
const menuBtn = document.getElementById("menuBtn");
menuBtn?.addEventListener('click', function(e) {
e.preventDefault();
const target = document.getElementById("some-selector");
target.scrollIntoView({ behavior: "smooth", block: "start" });
});