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

工作，如果我是正確的，那麼，data-scroll是元素，用戶的id要滾動的document，然後在你的代碼中不加＃號此行類似，

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

嘗試這個。

Answer 2

scrollTop的：yPos -71 =>「上滾動頂」：0
有一個嘗試，它在我的網頁

Answer 3

你在你的代碼中有mastake。 var the_id = $(this).data('scroll')返回'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; 
}