我在我的网站上有一个 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>
最佳答案
我不确定你是否可以像这样声明一个监听器。您选择 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);
}
亲切的问候
关于javascript - 在父节点上应用 scrolltop,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30371362/