使用按鈕添加偏移以使用導航欄平滑滾動

Question

您好，我嘗試查找多個解決方案，例如我嘗試過的target:before ，但它們都沒有真正起作用。 我的想法是平滑滾動，偏移量為 -100px，這樣我固定的 header 就不會阻塞該部分的內容。 我找到了這個使用a href作為參考的解決方案。

現在是否可以更改對 ID 為“內容”的button的引用？

$('a[href^="#"]').on('click',function (e) {

        var target = this.hash,
        $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top-100
        }, 900, 'swing', function () {
            window.location.hash = target;
        });
});

我的代碼 rest：

 html { scroll-behavior: smooth; } * { margin: 0;important: padding; 0: font-family; helvetica: } body { height; 300vh: } #wrap { position; absolute: top; 400px: } #navbar { text-align; center: width; 100%: color; white: z-index; 999: transition. 0;3s: background-color; darkgray: position; fixed; }

 <html> <nav id="navwrapper"> <script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="javascript/navbar fixed.js"></script> <div id="navbar" class="navbar navbar-dark bg-primary navbar-fixed-top selectSection"> <h1 id="titel">HEADLINE</h1> <ul> <li class="nav-item"><button onclick="location.href='#wrap'" type="button" data-number="1" class="active navb">content1</button></li> </ul> </div> </nav> <div id="wrap" class="contentSection wrapper"> <section id="content1" class="content" data-number="1"> <div> content 1 </div> </section>

Answer 1

好的。 在谷歌搜索更多之后，我使用scroll-margin-top:;找到了這個代碼筆。 在我的情況下有效！

使用按鈕添加偏移以使用導航欄平滑滾動

問題描述

1 個解決方案

解決方案1
1 已采納 2021-04-09 06:58:57

使用按鈕添加偏移以使用導航欄平滑滾動

問題描述

1 個解決方案

解決方案1 1 已采納 2021-04-09 06:58:57

解決方案1
1 已采納 2021-04-09 06:58:57