javascript - 在父节点上应用 scrolltop

Question

我在我的网站上有一个 anchor ，我在上面使用了 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

我不确定你是否可以像这样声明一个监听器。您选择 parent 的功能根本不正确。

您应该将监听器直接应用于框:$('.hcb_link').click(function() with:

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

亲切的问候