Question

当我点击我的图像（它是一个向下箭头）时，它会像我想要的那样平滑地向下滚动，但它似乎没有滚动得足够远。

我的卷轴下降到标题的90％，但仍显示剩余的10％。

这怎么可能？

＆＃13;

$(document).ready(function() {
  $('.js-scrollTo').on('click', function() {
    var page = $(this).attr('href');
    var speed = 700;
    $('html, body').animate( { scrollTop: $(page).offset().top }, speed );
    return false;
  });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<body>
  <div id="global">
    <header>
      <nav>
        <ul>
          <li id="acceuil"><a href="index.html">ACCEUIL</a></li>
          <li id="tarif"><a href="tarif.html">TARIF</a></li>
          <li id="livraison"><a href="livraison.html">LIVRAISON</a></li>
          <li id="suivi"><a href="suivi.html">SUIVI</a></li>
          <li id="contact"><a href="contact.html">CONTACT</a></li>
        </ul>
        <div id="down"><a class="js-scrollTo" href="#down"><img src="http://etu07.heff-technique.be/bicyolis/down-arrow.gif" alt="arrow" width="70" height="35"></a></div>
      </nav>	
    </header>
    <main>
      <div class="presentationimg">
        <div id="pic1"><p>Le service de livraison<br> de lettres et colis<br> ultra-rapide à Bruxelles</p>
          <img src="http://etu07.heff-technique.be/bicyolis/cyclingv2.gif" alt="picto1" width="500"></div><br>
        <div id="pic2"><p>Nos livraisons sont effectuées<br> dans les 19 communes de Bruxelles<br> en moins de 24 heures</p>
          <img src="http://etu07.heff-technique.be/bicyolis/vespa.gif" alt="picto2" width="500"></div>
        <div id="pic3"><p>Nous utilisons uniquement<br> des vélos, vélos électriques<br> et scooter électriques</p>
          <img src="http://etu07.heff-technique.be/bicyolis/bicycle-elec.gif" alt="picto3" width="500"></div>
      </div>
      <div id="slider">
        <p>Livraison de lettres et colis à domicile</p>
        <p>Sans pollution<br>Sans émission de CO2<br> et à petit prix!</p>
      </div>		
    </main>
    <footer></footer>
  </div>
</body>

＆＃13;

Answer 1

您的JavaScript告诉窗口向下滚动到ID #down的位置，这恰好是箭头按钮。

换句话说，当前单击箭头按钮会将页面向下滚动到该箭头按钮的顶部。

要解决此问题，请移除按钮链接周围的id="down"，然后将其移至<main>元素（因此它变为<main id="down">）。

根据您的要求，更详细地解释发生了什么：

用户点击此链接：<a class="js-scrollTo" href="#down">...</a>
JavaScript根据链接的href设置var页面：var page = $(this).attr('href')，现在page = #down
JavaScript滚动到#down：$(page).offset().top

向下滚动点击

1 个答案: