如何添加平滑的过渡效果

如何解决如何添加平滑的过渡效果

谁知道我该如何添加平滑过渡效果？

我在JS文件中尝试过此操作，但是它在每个div周围始终显示白色轮廓：

$(function () {
    menu = $('nav ul');

    $('#toggle-btn').on('click',function (e) {
        e.preventDefault();
        menu.slideToggle();
    });

    $(window).resize(function () {
        var w = $(this).width();
        if (w > 580 && menu.is(':hidden')) {
            menu.removeAttr('style');
        }
    });

    $('nav li').on('click',function (e) {
        var w = $(window).width();
        if (w < 580) {
            menu.slideToggle();
        }
    });
    $('.open-menu').height($(window).height());
});

// smooth scrolling

$('a[href*="#"]')
    .not('[href="#"]')
    .not('[href="#0"]')
    .click(function (event) {
        if (
            location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') &&
            location.hostname == this.hostname
        ) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                event.preventDefault();
                $('html,body').animate({
                    scrollTop: target.offset().top
                },1000,function () {
                    var $target = $(target);
                    $target.focus();
                    if ($target.is(":focus")) {
                        return false;
                    } else {
                        $target.attr('tabindex','-1');
                        $target.focus();
                    };
                });
            }
        }
    });

我尝试了其他几种方法，但是它们没有用。有没有办法用CSS做到这一点？还是只能使用JS完成？

解决方法

您可以使用CSS添加平滑的滚动效果：

html {
  scroll-behavior: smooth;
}