jQuery 动画不适用于 bootstrap 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')

脚本.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 的 animate 没有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 。