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效果。但事实上，这段代码使我的两个按钮变得完全可以克服，但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

我希望这可以帮助你......

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

Answer 2

scrollTop：yPos -71 =＆gt; ＆＃34;滚动顶部＆＃34;：0
尝试一下，它在我的页面中工作

Answer 3

如果我是正确的，那么data-scroll是您想要滚动document的元素的ID，然后在您的代码中，您不会在此行中添加＃符号，< / p>

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

试试这个。

Answer 4

你的代码中有奶油。 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,

到

class Pair(){
    String key
    String value;
}

有关更好的理解，请参阅fiddle。

Javascript ScrollTop效果不起作用

4 个答案: