如何在 Bootstrap 中使用固定侧边栏实现平滑滚动？

Question

尝试实现平滑滚动似乎不起作用。是因为侧边栏导航吗？

总的来说，我对 JQuery 和 JS 还是有点陌生。我正在使用侧边栏导航在 Bootstrap 4 中设置一个新站点，并希望在我的 HTML 中实现对导航链接/锚标记的平滑滚动。我之前在其他网站上设置了平滑滚动，但这次似乎对我不起作用，我无法弄清楚发生了什么！

我的 HTML：

<nav id="sidebar">

        <div class="sidebar-header text-center">

            <h3>DS</h3>

        </div>

        <ul class="list-unstyled components">

            <li class="active">

                <a href="#home" class="smooth-scroll">Home</a>

            </li>

            <li>

                <a href="#about" class="smooth-scroll">About</a>

            </li>

        </ul>

        <ul class="list-unstyled CTAs">

            <li>

                <a href="#" class="download">Download Resume PDF</a>

            </li>

        </ul>

    </nav>

<div class="blank-section" id="about"></div>

<div class="regular-padding">

    <h3 id="about-h3"><mark>About Me</mark></h3>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse efficitur dapibus dolor eget finibus. Donec vulputate ultrices mauris eget hendrerit. Integer viverra dui ipsum, id egestas ex laoreet viverra. Proin elit ipsum, sagittis sed ullamcorper at, viverra nec lacus. Proin magna sem, lacinia vitae varius ut, sollicitudin efficitur tellus. Integer vel vulputate purus. Duis quis elit laoreet, condimentum ipsum eget, venenatis felis.</p>

</div>

</div>`

我的JS：

// sidebar collapse

$(document).ready(function () {

  $('#sidebarCollapse').on('click', function () {

    $('#sidebar, #content').toggleClass('active');

    $('.collapse.in').toggleClass('in');

    $('a[aria-expanded=true]').attr('aria-expanded', 'false');

  });

});

//smooth scroll

$(document).ready(function() {

  $('#sidebar ul li a').click(function(e) {

 var targetHref = $(this).attr('href');

$('html, body').animate({

    scrollTop: $(targetHref).offset().top

}, 1000);

e.preventDefault();

  });

});

锚点标签工作正常，侧边栏按原样折叠/展开，但仍无法执行平滑滚动。

Answer 1

你应该用 开始你的函数e.preventDefault()，这就是你如何防止浏览器滚动，而是使用 jQuery 的animate函数来执行滚动。在您的情况下，浏览器在 jQuery 之前执行它的操作，并且您的滚动效果是不可见的，因为用户已经在目标目的地。