Javascript ScrollTop effect isn't working

Question

I'm having some difficulties with the ScrollTop effect. In fact, it isn't working and I can't figure out why.

Here is the Javascript part of my code :

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

I'd like to apply the JS effect just here. But in fact, this code turns my two buttons entirely cliquable, but the JS effect doesn't work :

<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>

Here is the rest of the index page, just in case :

<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>

Thanks in advance for your help ! :)

Answer 1

if I am correct then, data-scroll is the id of element where you want to scroll the document, then in your code you don't add # sign in this line like,

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

try out this.

Answer 2

scrollTop: yPos -71 => "scroll-top":0
have a try ,it was worked in my page

Answer 3

You have mastake in your code. var the_id = $(this).data('scroll') returns 'ancreProfessionnel' but then you evaluate $(the_id) that equals $('ancreProfessionnel') and that's wrong. There are no elements by this selector.

You can change

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

to

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

See fiddle for better understanding.

Answer 4

I hope this helps you...

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