Apply scrolltop on a parentNode

Question

I have on my website an anchor on which I used scrollTop. Yet, I'd like to apply the scrollTop on the orange box that contains the link, and not only on the text, to help my users who might not click on the exact right place.

I've tried using :

$('a[href^="#"]').parentNode.click(function()

OR

$('a[href^="#"]').previousSibling.click(function()

Yet, none of them seam to work... Thanks 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>

Answer 1

I am not sure if you can declare a listener like this. Your function for selecting the parent is not correct at all.

You should 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 a parent element.

####################

If you want to reduce your code, I would suggest to get rid of the a-element at all.

You could to it like this to speed things up:

<div class="col-sm-9 col-sm-offset-2 hcb_link" data-scroll="ancreProfessionnel">
  Vous êtes un professionnel
</div>

with:

$('.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);
}

Kind regards