jQuery 动画无法使用 bootstrap 5

Question

我正在使用 bootstrap 5.

我有这个 a 元素：

<div class="mb-3">
    <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseTicket" id="scrollDown" role="button" aria-expanded="false" aria-controls="collapseTicket">
        نوشتن پاسخ
    </a>
</div>
<div id="div1" style="height: 1000px; width 100px">
    Test 1
</div>
<br/>
<div class="collapse" id="collapseTicket" style="height: 1000px; width 100px">
    Test 2
</div>
<button id="click">Click me</button>

然后我还有一些其他元素，比如其他文本输入、文本区域等

当用户使用#collapseTicket 单击该输入时，页面应该滚动到页面的最后一个元素，并带有漂亮的动画。它应该是滚动到标签而不是顶部。

动画不应该太快并且应该流畅。

我是运行最新的jQuery版本。我宁愿不安装任何插件，而是使用默认的 jQuery 功能来实现这一点。

<script src="{{ asset('themes/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ asset('themes/js/jquery-3.5.1.js') }}"></script>
<script src="{{ asset('themes/js/bootstrap-select.js') }}"></script>
<script src="{{ asset('themes/js/defaults-fa_IR.js') }}"></script>
<script src="{{ asset('themes/vue/vue.min.js') }}"></script>
<script src="{{ asset('themes/vue/moment.min.js') }}"></script>
<script src="{{ asset('themes/vue/moment-jalaali.js') }}"></script>
<script src="{{ asset('themes/vue/vue-persian-datetime-picker-browser.js') }}"></script>
<script src="{{ asset('themes/js/script.js') }}"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            date: ''
        },
        components: {
            DatePicker: VuePersianDatetimePicker
        }
    });
</script>
@include('sweet::alert')

script.js

$(document).ready(function (){
    $("#scrollDown").click(function (){
        $('html, body').animate({
            scrollDown: $("#collapseTicket").offset().down
        }, 2000);
    });
});

感谢您的回答。

Answer 1

正如@Rory 指出的那样，jQuery 没有 down 属性，因此您应该使用 top，如：$("#collapseTicket").offset().top

第二个问题是 jQuery 的动画没有 scrollDown 属性，只有 scrollTop 和 scrollLeft，因此您可以滚动到元素的顶部或左边缘。

动画滚动到某个位置的另一个复杂问题是 Bootstrap 5 将根元素上的 scroll-behavior 设置为 smooth。这至少会导致 Chrome 一开始移动缓慢，因为 jQuery 正在发送一系列滚动命令，每个滚动命令都会稍微移动显示。这就是为什么在下面的代码片段中，我将 :root 设置为 scroll-behavior: auto;

$(function() {
    $("#scrollDown").click(function() {
        $('html, body').animate({
            scrollTop: $("#collapseTicket").offset().top
        }, 2000);
    });
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

<style>
    :root {
        scroll-behavior: auto;
    }
</style>

<div class="mb-3">
    <a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseTicket" id="scrollDown" role="button" aria-expanded="false" aria-controls="collapseTicket">
        نوشتن پاسخ
    </a>
</div>
<div id="div1" style="height: 1000px; width: 100px;">
    Test 1
</div>
<br />
<div class="collapse" id="collapseTicket" style="width: 100px;">
    Test 2
</div>
<div style="height: 1000px; width: 100px; background-color: salmon;">
    filler
</div>

如果需要，您可以使用 window.matchMedia("(prefers-reduced-motion: reduce)"); 来管理滚动行为。

根据 Can I User，Safari 当前不支持 scroll-behavior。

jQuery 动画无法使用 bootstrap 5

jQuery animate not working with bootstrap 5

jquery

scroll

jquery-animate

bootstrap-5