单击时平滑滚动到特定部分
[英]Smooth scrolling to specific section on click
问题描述
我对编码比较陌生，所以可能有一些非常明显的东西我遗漏了......但我正在尝试创建一个按钮来滚动到我网页上的指定部分。 我在以前的网页上使用了几乎相同的代码，它运行得很好，但出于某种原因，我在这个网页上苦苦挣扎，无论我做什么它都不想工作！
这是我所拥有的简化版本：
$(document).ready(function() { $(".js--scroll-to-collection").click(function() { $('html, body').animate({ scrollTop: $(".js--section-collection").offset().top }, 1000); }); $('.js--scroll-to-start').click(function() { $('html, body').animate({ scrollTop: $('.js--section-features').offset().top }, 1000); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <section> <div> <a class="btn js--scroll-to-collection" href="#">Shop</a> <a class="btn js--scroll-to-start" href="#">Shop</a> </div> </section> <section class="section-features js--section-features"> <div class="row"> <h2>These are the features</h2> <p> This paragraph describes the features of the products on thi webpage. </p> </div> </section> <section class="section-collection js--section-collection"> <div> <h2>Meet the Collection</h2> <p>This section describes the different collections in the product range.</p> </div> </section>
任何帮助都非常感谢！
1 个解决方案
解决方案1
0 2020-10-11 21:35:22
您只需要填写一页以上的部分。 这是您的代码示例。
https://jsfiddle.net/y3dvtpf2/
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(".js--scroll-to-collection").click(function () {
$('html, body').animate({
scrollTop: $(".js--section-collection").offset().top
}, 1000);
});
$('.js--scroll-to-start').click(function () {
$('html, body').animate({
scrollTop: $('.js--section-features').offset().top
}, 1000);
});
});
</script>
<section>
<div>
<a class="btn js--scroll-to-collection" href="#">Shop</a>
<a class="btn js--scroll-to-start" href="#">Shop</a>
</div>
</section>
<section class="section-features js--section-features">
<div class="row">
<h2>These are the features</h2>
<p>
This paragraph describes thedddd
<br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
features of the products on thi webpage.
</p>
</div>
</section>
<section class="section-collection js--section-collection">
<div>
<h2>Meet the Collection</h2>
<p>This section describes the different
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
collections in the product range.</p>
</div>
</section>
</html>
平滑水平滚动到一个部分
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.