gpt4 book ai didi

html - 点击向下滚动

转载 作者:行者123 更新时间:2023-11-28 15:56:37 25 4
gpt4 key购买 nike

当我点击我的图片(它是一个向下的箭头)时,它会像我想要的那样平滑地向下滚动,但它似乎滚动得不够远。

我的滚动条下降到标题的 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>
</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>

最佳答案

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

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

要解决此问题,请删除 id="down"围绕您的按钮链接,并将其移动到 <main>元素(所以它变成了 <main id="down"> )。

根据您的要求,对正在发生的事情进行更详细的解释:

  1. 用户点击此链接:<a class="js-scrollTo" href="#down">...</a>
  2. JavaScript 根据您链接的 href 设置 var 页面:var page = $(this).attr('href') ,所以现在 page = #down
  3. JavaScript 滚动到 #down 的顶部: $(page).offset().top

关于html - 点击向下滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41030454/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com