Применить scrolltop на parentNode

Question

У меня на моем сайте якорь, на котором я использовал scrollTop. Тем не менее, я хотел бы применить scrollTop на оранжевом поле, которое содержит ссылку, а не только на текст, чтобы помочь моим пользователям, которые не могут нажать на точное место.

Я попытался с помощью:

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

ИЛИ

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

Тем не менее, ни один из них не шву работать ... Спасибо за вашу помощь.

$('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

Я не уверен, если вы можете объявить слушателя, как это. Ваша функция выбора родителя неверна.

Вы должны обратиться слушателем непосредственно к коробке: $('.hcb_link').click(function() с:

var the_id = $(this).find('a').attr("href"), 

parent() будет правильная функция для выбора родительского элемента.

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

Если вы хотите уменьшить свой код, я хотел бы предложить, чтобы избавиться от а-элемента вообще.

Вы могли бы к нему так, чтобы ускорить процесс:

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

с:

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

Сердечные приветы