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

亲切的问候

在parentNode上应用scrolltop

1 个答案: