Apply scrolltop on parentNode
I have an anchor on my site where I used scrollTop. However, I would like to apply scrollTop on the orange box that contains the link, not just the text, to help my users who can't click in the right place.
I've tried using:
$('a[href^="#"]').parentNode.click(function()
OR
$('a[href^="#"]').previousSibling.click(function()
However, none of them work. Thank you for your help.
$('a[href^="#"]').click(function(){
var the_id = $(this).attr("href"),
yPos = $(the_id).offset().top,
speed = 1500;
$('html, body').animate({
scrollTop: yPos -71 // -71px pour prendre en compte la taille du bandeau supérieur.
}, speed);
return false;
});
.hcb_link {
background: #D5420F;
text-align: center;
width: 300px;
font-size: 18px;
padding: 10px 0px;
margin: 10px auto 30px;
border-radius: 2px;
cursor: pointer;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="carrousel">
<div class="row">
<div class="col-sm-4 col-sm-offset-2">
<div class="row">
<div class="col-sm-9 col-sm-offset-2 hcb_link">
<a href="#ancreProfessionnel">Vous êtes un professionnel</a>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-9 col-sm-offset-1 hcb_link">
<a href="#ancreEtudiant">Vous êtes un étudiant</a>
</div>
</div>
</div>
</div>
</div>
<div id="ancreProfessionnel" class="hss_container light_background" style="min-height:520px;">
<div class="max_width">
<div class="hssc_title"><span class="third_color">Entrepreneurs</span>, démultipliez votre force commerciale grâce à des étudiants rémunérés au succès
</div>
</div>
</div>
<div id="ancreEtudiant" class="hss_container dark_background" style="min-height:490px; border-bottom: 1px solid white;">
<div class="max_width">
<div class="hssc_title"><span class="fourth_color">Étudiants des Grandes Écoles</span>, mettez vos compétences et votre énergie à profit
</div>
</div>
</div>
<div id="ancreEtudiant" class="hss_container dark_background" style="min-height:490px; border-bottom: 1px solid white;">
<div class="max_width">
<div class="hssc_title"><span class="fourth_color">Étudiants des Grandes Écoles</span>, mettez vos compétences et votre énergie à profit
</div>
</div>
</div>
source to share
I'm not sure if you can declare a listener this way. Your parent selection function is incorrect.
You have to apply the listener directly to the box: $('.hcb_link').click(function()
with:
var the_id = $(this).find('a').attr("href"),
parent()
would be the correct function to select the parent element.
If you want to make your code smaller, I would suggest getting rid of the a-element entirely.
You could do this to speed things up:
<div class="col-sm-9 col-sm-offset-2 hcb_link" data-scroll="ancreProfessionnel">
Vous êtes un professionnel
</div>
from:
$('.hcb_link').click(function(){
var the_id = $(this).data('scroll'),
yPos = $(the_id).offset().top,
speed = 1500;
$('html, body').animate({
scrollTop: yPos -71 // -71px pour prendre en compte la taille du bandeau supérieur.
}, speed);
}
respectfully
source to share