亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 Bootstrap 中使用固定側邊欄實現平滑滾動?

如何在 Bootstrap 中使用固定側邊欄實現平滑滾動?

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

1 回答

?
犯罪嫌疑人X

TA貢獻2080條經驗 獲得超4個贊

你應該用 開始你的函數e.preventDefault(),這就是你如何防止瀏覽器滾動,而是使用 jQuery 的animate函數來執行滾動。在您的情況下,瀏覽器在 jQuery 之前執行它的操作,并且您的滾動效果是不可見的,因為用戶已經在目標目的地。


查看完整回答
反對 回復 2021-09-04
  • 1 回答
  • 0 關注
  • 383 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號