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

Question

尝试实现平滑滚动似乎没有效果。是因为侧边栏导航吗？

总的来说，我对 JQuery 和 JS 还是有些陌生。我正在使用侧边栏导航在 Bootstrap 4 中设置一个新站点，并希望在我的 HTML 中实现对导航 links/anchor 标签的平滑滚动。我以前在其他网站上设置过平滑滚动，但这次似乎对我不起作用，我不知道发生了什么！

我的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();
  });
});

锚标签工作正常，侧边栏正常 collapsing/expanding，但平滑滚动仍然没有执行。

Answer 1

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

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

How do you implement smooth scrolling with a fixed sidebar in Bootstrap?

javascript

jquery

html

twitter-bootstrap

smooth-scrolling