如何添加平滑过渡效果

Question

有谁知道我如何为此添加平滑过渡效果？

我在一个 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来完成？

Answer 1

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

html {
  scroll-behavior: smooth;
}