里面的某一个li时，就自动下滑到相应<h3></h3>里面相同的内容，这个用js怎样实现？

<ul>

    <li>1.OUR SERVICES</li>

    <li>2.INTELLECTUAL PROPERTY RIGHTS</li>

    <li>3.USER REPRESENTATIONS</li>

    <li>4.USER REGISTRATION</li>

    <li>5.PRODUCTS</li>

</ul>

<h3>1.OUR SERVICES</h3>

<p>These Legal Terms constitute a legally binding agreement made between you, whether personaly or on behalf of an entty ("you",. and Guanazhou LC Sion Co.Ltd, concerning your access to and use ofthe  revised Legal Terms by your continued use of the Services after the date such revised Legal Terms are postedThe Services are intended for users who are at least 18 years old. Persons under the age of 18 are not permited to use or recister for the ServicesWe recommend that you print a copy of these Legal Terms for your records. </p>

<h3>2.INTELLECTUAL PROPERTY RIGHTS</h3>

<p>These Legal Terms constitute a legally binding agreement made between you, whether personaly or on behalf of an entty ("you",. and Guanazhou LC Sion Co.Ltd, concerning your access to and use ofthe  revised Legal Terms by your continued use of the Services after the date such revised Legal Terms are postedThe Services are intended for users who are at least 18 years old. Persons under the age of 18 are not permited to use or recister for the ServicesWe recommend that you print a copy of these Legal Terms for your records. </p>

...




<script>

document.addEventListener('DOMContentLoaded', function() {

    // 获取所有的li元素

    var items = document.querySelectorAll('ul li');

    // 获取导航栏的高度

    var header = document.querySelector('.header-wrapper'); // 根据你的导航栏类名进行调整

    var headerHeight = header.offsetHeight;

    // 为每个li元素添加点击事件监听器

    items.forEach(function(item) {

        item.addEventListener('click', function() {

            // 获取li的文本内容，并去掉前面的数字和点

            var liText = item.textContent.replace(/^\d+\.\s*/, '');

            // 根据文本内容查找相应的h3元素

            var targetElement = Array.from(document.querySelectorAll('h3')).find(h3 => h3.textContent.includes(liText));

            if (targetElement) {

                // 滚动到目标元素并进行额外调整

                var targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - 2*headerHeight;

                window.scrollTo({ top: targetPosition, behavior: 'smooth' });

            }

        });

    });

});

</script>

这个代码的工作原理是：

1. 获取所有的li元素，并为每个li添加一个点击事件监听器。

2. 在点击事件中，获取li的文本内容，并去掉前面的数字和点（例如"1. OUR SERVICES"变成"OUR SERVICES"）。

3. 使用Array.from()将所有h3元素转换为数组，然后使用find()方法找到文本内容包含li文本的h3元素。

4. 使用scrollIntoView({ behavior: 'smooth' })方法平滑滚动到目标h3元素。

通过这种方式，你可以在不修改li和h3标签属性的情况下，实现点击li时自动滚动到相应的h3标签的功能。