嘗試實現平滑滾動似乎不起作用。是因為側邊欄導航嗎?總的來說,我對 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(); });});錨點標簽工作正常,側邊欄按原樣折疊/展開,但仍無法執行平滑滾動。
如何在 Bootstrap 中使用固定側邊欄實現平滑滾動?
元芳怎么了
2021-09-04 17:42:43
