javascript - 需要在将内容滚动到底部时从水平滚动菜单列表显示事件菜单

Question

我在页面顶部有一个水平菜单列表，在底部有一个内容列表。标题菜单有一个指向底部内容特定部分的链接。单击每个菜单时，内容需要滚动到具有平滑效果的部分。我从网上找到了一些我想要的样式，但它没有水平滚动到菜单部分。

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

这是我的要求的一个例子，但它需要在顶部有更多的菜单。此外，当我们将内容滚动到底部时，相应的菜单需要滚动可见区域。

抱歉，我编辑了我的问题，因为我的描述不清楚。

this is an example while selecting menu2

this is to happen while we scroll the content area to 'section 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>