向下滾動點擊

當我點擊我的圖片時（它是一個向下的箭頭），它就像我想要的那樣順利地向下滾動，但它看起來好像不夠滾動。向下滾動點擊

我的卷軸下降到我頭部的90％，但仍顯示剩餘10％。

這怎麼可能？

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

<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> \t 
 
    </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> \t \t 
 
    </main> 
 
    <footer></footer> 
 
    </div> 
 
</body>

來源

2016-12-08 illiaskh

使用此[鏈接]（https://css-tricks.com/snippe ts/jquery/smooth-scrolling /） –

JavaScript是告訴窗口向下滾動到ID #down，這恰好是箭頭按鈕的位置。

換句話說，目前單擊箭頭按鈕會將頁面向下滾動到該箭頭按鈕的頂部。

要解決此問題，請移除圍繞您的按鈕鏈接的id="down"，並將其移至<main>元素（因此它變爲<main id="down">）。

按照您的要求，發生了什麼的更詳細的解釋：

用戶點擊此鏈接：<a class="js-scrollTo" href="#down">...</a>
根據您的鏈接的HREF的JavaScript設置VAR頁：var page = $(this).attr('href')，所以現在page = #down
JavaScript滾動到頂部#down：$(page).offset().top

來源

2016-12-08 01:50:28

爲了理解，我可以問你哪一行需要在JavaScript中向下滾動到id #down？ – illiaskh

@raggz我給我的答案添加了一個解釋。 –

向下滾動點擊

回答

相關問題