I have an anchor link that takes me to a div on another page of the site. I do not like how the page looks because it is very close to the top margin. I would like to move the div down.
How can I do it for javascript? I tried this, but it does not work for me
if(window.location.hash) {
var hashT= window.location.hash;
var pos = $('.team-work__article').offset().top;
pos = pos + $('.team-work__article').outerHeight();
$('html,body').animate({
scrollTop: pos
},500);
}
These are the links
<article class="team">
<a href="profesionales.html#team-1" class="team-vail">
<div class="team-content">
<h3 class="team__title">Dr. Antonio Gabriel</h3>
<p class="team_excerpt">Odontólogo</p>
</div>
<img src="images/team_02.jpg" alt="Dr. Antonio Gabriel" class="team__img">
</a>
</article>
<article class="team">
<a href="profesionales.html#team-2" class="team-vail">
<div class="team-content">
<h3 class="team__title">Dra. Sara Machín</h3>
<p class="team_excerpt">Odontóloga</p>
</div>
<img src="images/team_03.jpg" alt="Dra. Sara Machín" class="team__img">
</a>
</article>
And this is the code where the links go
<article id="team-1" class="team-work__article">
<div class="team__content">
<h3>Dr. Jose Carzorla</h3>
<ul>
<li>Director médico</li>
<li>Responsable sanitario</li>
<li>Dr. en Medicina y Cirugía</li>
<li>Dr. en Odontología</li>
</ul>
</div>
<img src="images/team_01.jpg" alt="Dr. Jose Carzorla" class="team-work__img">
</article>
<article id="team-2" class="team-work__article reverse">
<div class="team__content">
<h3>Dr. Antonio Gabriel</h3>
<ul>
<li>Director médico</li>
<li>Responsable sanitario</li>
<li>Dr. en Medicina y Cirugía</li>
<li>Odontólogo - Ortodoncista</li>
</ul>
</div>
<img src="images/team_02.jpg" alt="Dr. Antonio Gabriel" class="team-work__img">
</article>