jQuery动画不适用于引导程序5

Question

我正在使用引导程序 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 正在发送一系列滚动命令，每个命令都会稍微移动显示。这就是为什么，在下面的 sn-p 中，我将 :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。