需要在將內容滾動到底部時顯示水平滾動菜單列表中的活動菜單

Question

我在頁面頂部有一個菜單的水平列表，在底部有一個內容。 標題菜單具有指向底部內容中特定部分的鏈接。 單擊每個菜單時，內容需要滾動到具有平滑效果的部分。 我從網上找到了一些我想要的樣式，但它沒有水平滾動到菜單部分。

https://www.cssscript.com/demo/simple-scrollspy-plugin-javascript/

這是我的要求的一個例子，但它需要在頂部有更多的菜單。 此外，當我們將內容滾動到底部時，相應的菜單需要滾動可見區域。

抱歉，我已經編輯了我的問題，因為我的描述不清楚。

這是選擇 menu2 時的示例

這是在我們將內容區域滾動到“第 5 節”時發生的

請查看兩者的活動菜單。

Answer 1

只需在css下方添加

html {
    scroll-behavior: smooth;
}

或者你也可以用jQuery

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script type="text/javascript">
    jQuery(document).on('click', 'a[href^="#"]', function(e) {
        // target element id
        var id = jQuery(this).attr('href');

        // target element
        var $id = jQuery(id);
        if ($id.length === 0) {
            return;
        }

        // prevent standard hash navigation (avoid blinking in IE)
        e.preventDefault();

        // top position relative to the document
        var pos = $id.offset().top;

        // animated top scrolling
        jQuery('body, html').animate({scrollTop: pos});
    });
</script>