如何在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之前的操作，並且滾動效果是不可見的，因為用戶已經在目標位置。