I'm just beginning web design, and I've come up with this code to scroll to a place in the same page.
I don't know if this can or should be improved much longer, so I'm asking for any tips that can make this code better.
I know it's messy, but I will clean it later. I just want to know if there's a better method.
$(document).ready(function(){
$('#Tecnologia').click(function(){
$(".ConHome").css('transition','all 0.4s ease');
$(".ConHome").css('transform','translateY(-50em)');
$("#BlankSpaceMenu").css('transition','all 0.4s ease');
$('#BlankSpaceMenu').css('transform','translateY(-50em)');
$(".ConTech").css('transition','all 0.4s ease');
$(".ConTech").css('transform','translateY(-50em)');
$(".TopHeader").css('transition','all 0.4s ease');
$(".TopHeader").css('border-bottom-color','rgba(0,0,255,1)');
})})
#BlankSpaceMenu{
position:relative;
height:7em;
width:100%;
background-color:rgba(0,0,255,1);
z-index:9;
}
.Container{
position:relative;
color:rgba(255,255,255,1);
}
.TopHeader{
position:fixed;
background-color:rgba(255,153,0,1);
color:rgba(255,255,255,1);
height:7em;
width:100%;
z-index:10000;
border-bottom:rgba(0,0,0,1) dashed 10px;
}
.ConHome{
position: relative;
background-color: rgba(0,0,0,1);
color: rgba(255,255,255,1);
height: 50em;
width: 100%;
z-index:10;
}
.ConTech{
position: relative;
background-color:rgba(0,0,255,1);
color:rgba(255,255,255,1);
height: 50em;
width: 100%;
z-index:8;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<body>
<section class="Container">
<header class="TopHeader">
<nav id="NavBar">
<a id="Tecnologia">Tecnologia</a>
</nav>
</header>
<article class="ConHome">
....
</article>
<section id="BlankSpaceMenu">
</section>
<article class="ConTech">
...
</article>
</section>
</body>
.Container
that contains#Tecnologia
instead? \$\endgroup\$