在parentNode上应用scrolltop

Question

我在我的网站上使用了scrollTop的锚点。然而，我想在包含该链接的橙色框上应用scrollTop，而不仅仅是在文本上，以帮助可能不会点击确切位置的用户。

我已经尝试使用：

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

OR

$('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()将是正确的功能选择父元素。

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

如果你想减少你的代码，我会建议摆脱a元素。

你可以把它像这样加快速度：

<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); 
} 

亲切的问候