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

【问题标题】：How do you implement smooth scrolling with a fixed sidebar in Bootstrap?如何在 Bootstrap 中使用固定侧边栏实现平滑滚动？
【发布时间】：2019-08-05 19:43:34
【问题描述】：

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

总的来说，我对 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();
  });
});

锚标签工作正常，侧边栏正常折叠/展开，但平滑滚动仍未执行。

【问题讨论】：

看不到你的css，但你有没有放html {scroll-behavior: smooth;}？
我愿意，唯一的问题是 scroll-behavior: smooth; 仍然不能在所有浏览器中工作，包括 Safari。

标签： javascript jquery html twitter-bootstrap smooth-scrolling

【解决方案1】：

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

【讨论】：

谢谢！我想这就是它。