Javascript ScrollTop 效果无效

Question

我在使用 ScrollTop 效果时遇到了一些困难。事实上，它不起作用，我不明白为什么。

这是我的代码的 Javascript 部分：

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

我想在这里应用JS效果。但实际上，这段代码把我的两个按钮完全cliquable，但是JS效果不起作用:

<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" data-scroll="ancreProfessionnel">
        Vous êtes un professionnel
      </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="row">
      <div class="col-sm-9 col-sm-offset-2 hcb_link" data-scroll="ancreEtudiant">
        Vous êtes un étudiant
      </div>
      </div>
    </div>
</div>

这是索引页的其余部分，以防万一:

<div id="ancreProfessionnel" class="hss_container light_background" style="min-height:475px;">
  <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>

    <% if !user_signed_in? %>
        <div class="hcb_link" onclick="location.href = '<%= url_for new_recruiter_registration_path%>';">Publiez gratuitement une mission</div>
    <% elsif current_user.is_recruiter? %>
        <div class="hcb_link" onclick="location.href = '<%= url_for recruiters_offers_path %>';">Publiez votre offre gratuitement</div>
    <% end %>
    <br />
    <div class="col-md-3">
      <div class="hsscv_a_title">Choisissez parmi 3 objectifs de mission</div>
      <div class="hsscv_a_desc">Des contacts qualifiés, rendez-vous ou clients supplémentaires ? Nos étudiants complètent vos démarches.</div>
      <%= image_tag ("ha_1.png") , :class => 'hsscv_img' %>
    </div>
    <div class="col-md-3">
      <div class="hsscv_a_title">Indiquez votre prix pour une mission réussie</div>
      <div class="hsscv_a_desc">Communiquez aux étudiants vos conditions et la rémunération que vous verserez à la fin de la mission.</div>
      <%= image_tag ("ha_4.png") , :class => 'hsscv_img' %>
    </div>
    <div class="col-md-3">
      <div class="hsscv_a_title">Plus de 500 étudiants de Grandes Ecoles</div>
      <div class="hsscv_a_desc">Votre mission est ensuite communiquée auprès de notre réseau. Les étudiants intéressés vous transmettent leur CV.</div>
      <%= image_tag ("ha_3.png"), :alt => "", :class => 'hsscv_img' %>
    </div>
    <div class="col-md-3">
      <div class="hsscv_a_title">Accélérez </br> votre croissance</div>
      <div class="hsscv_a_desc">Grâce à une rémunération au succès, des commerciaux vous aident à développer vos ventes.</div>
      <%= image_tag ("ha_2.png") , :class => 'hsscv_img' %>
    </div>



<div id="ancreEtudiant" class="hss_container dark_background" style="min-height:480px; 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>
    <% if !user_signed_in? %>
        <div class="hcb_link" onclick="location.href = '<%= url_for new_job_seeker_registration_path %>';">Créez votre profil en deux clics</div>
    <% elsif current_user.is_jobseeker? %>
        <div class="hcb_link" onclick="location.href = '<%= url_for cv_job_seekers_path %>';">Renseigne ton parcours</div>
    <% end %>
    <br />

    <div class="col-md-3">
      <div class="hsscv_s_title">Démultipliez<br />vos expériences</div>
      <div class="hsscv_s_desc">Accédez à des missions exclusives obtenues spécialement pour vous.</div>
      <%= image_tag ("hs_2.png") , :class => 'hsscv_img' %>
    </div>

        <div class="col-md-3">
    <div class="hsscv_s_title">Valorisez et démontrez vos compétences</div>
    <div class="hsscv_s_desc">Les missions proposées vous permettent d’être rémunérés et évalués.</div>
    <%= image_tag ("hs_1.png") , :class => 'hsscv_img', :style => 'height:40px;' %>
  </div>

    <div class="col-md-3">
    <div class="hsscv_s_title">Ayez un impact : Accélérez le développement d'entreprises</div>
    <div class="hsscv_s_desc">Intervenez sur une problématique stratégique : l'acquisition de clients.</div>
    <%= image_tag ("hs_3.png") , :class => 'hsscv_img' %>
  </div>

    <div class="col-md-3">
    <div class="hsscv_s_title">Devenez<br />un professionnel</div>
    <div class="hsscv_s_desc">Entrez dès aujourd'hui dans le monde professionnel et étendez votre réseau.</div>
    <%= image_tag ("hs_4.png") , :class => 'hsscv_img' %>
  </div>
  </div>

在此先感谢您的帮助！ :)

Answer 1

scrollTop: yPos -71 => "scroll-top":0
试一试，它在我的页面上有效

Answer 2

如果我是正确的，那么 data-scroll 是您要滚动 document 的元素的 ID，然后在您的代码中您不要在这一行中添加 # 符号，例如，

yPos =  $('#' + the_id).offset().top;

试试这个。

Answer 3

你的代码有问题。 var the_id = $(this).data('scroll') returns 'ancreProfessionnel' 但随后你评估 $(the_id) 等于 $('ancreProfessionnel')，这是错误的。此选择器没有元素。

你可以改变

var the_id = $(this).data('scroll'),
yPos = $(the_id).offset().top,

到

var yPos = $(this).offset().top,

请参阅 fiddle 以获得更好的理解。

Answer 4

希望对你有所帮助...

$('.hcb_link').click(function(){
    var the_id = $(this), //this should be the element you want to scroll to
    yPos = $(the_id).parent().scrollTop() + $(the_id).offset().top - $(the_id).parent().offset().top,
    speed = 1500;
})
$('html, body').animate({
    scrollTop: yPos      
}, speed);
return false;
}

Javascript ScrollTop 效果无效

Javascript ScrollTop effect isn't working

javascript

jquery

scrolltop