在锚点引用的页面加载后平滑滚动到元素的 JS 函数

Question

在过去的几天里，我正在研究 JS 中的自动平滑滚动功能，该功能可以滚动到 div 容器（容器应该在屏幕中居中，而不是像 CSS 平滑行为那样）。

我找到了几十个解决方案，但没有一个在我的情况下有效..

我有一个小的下拉菜单，其中包含对父页面上 div 的引用。 用户应该能够点击这些链接中的任何一个，然后被定向到同一页面，但具有不同的滚动事件。

例如，如果他单击下拉菜单中的“Damen”，则应该加载“Leistungen”页面，然后是平滑滚动到给定元素的事件。 我不想要的是标准的 CSS 平滑滚动。

可悲的是，我只是在学习 Javascript 并且只能改变给定的解决方案这么多，遗憾的是它从来没有奏效过..

如果它有助于继承我的 CodePen 中的完整代码： https ://codepen.io/gisbert12843/pen/NWrRjbE

如需实时查看，请访问： https : //gisbertstestsite.xyz/dist/htmls/leistungen.html

这是我当前的一些代码（只是相关部分）^^

导航：

<nav class="navbar">
    <ul>
        <li><a href="/index.html"><i class="fas fa-home"></i> Home</a></li>
        <li class="active dropdown"><a href="/dist/htmls/leistungen.html"><i class="fas fa-cut"></i>
                Leistungen</a>
            <div class="dropdown-class">
                <ul class="dropdown-content">
                    <li><a href="/dist/htmls/leistungen.html#Herren">Herren</a></li>
                    <li><a href="/dist/htmls/leistungen.html#Damen">Damen</a></li>
                    <li><a href="/dist/htmls/leistungen.html#Jugend_Kinder">Jugend und Kinder</a></li>
                    <li><a href="/dist/htmls/leistungen.html">Farben und Strähnen</a></li>
                    <li><a href="/dist/htmls/leistungen.html">Wellen und Glätten</a></li>
                    <li><a href="/dist/htmls/leistungen.html">Extension | Perücken | Toupets</a></li>
                    <li><a href="/dist/htmls/leistungen.html">Kuren</a></li>
                    <li><a href="/dist/htmls/leistungen.html">Brautservice</a></li>
                    <li><a href="/dist/htmls/leistungen.html">Kosmetik</a></li>
                </ul>
            </div>
        </li>
    </ul>
</nav>

它应该滚动到的示例 div 元素：

<div class="blurwrapper Herren" id="scroll-Herren">
       <div class="table">
              <table class="fl-table"></table>
       </div>
</div>

和我目前的（不工作）javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        let page_url = window.location.href;
        let page_id = page_url.substring(page_url.lastIndexOf("#") + 1);
        // alert(page_id);
        if (page_id == "Jugend_Kinder") {
            $("html, body").animate({
                scrollTop: $("#scroll-" + page_id).offset().top
            }, 1000);
        }

    });
</script>

我很感激并愿意接受任何形式的提示和建议，无论多小！

此致！

Answer 1

每个人都必须从某个地方开始，对吗？ ^^

我觉得问题是虽然你正确地做了 URL，但你没有指定你的锚点 ID。 尽管 URL 要求/dist/htmls/leistungen.html#Herren但没有 ID 为“Herren”的元素。

每个锚点a-url-link-and#someAnchor将寻找一个 id 为#someAnchor的元素

另请注意：

• 锚链接和 ID 区分大小写
• 当一个新页面加载并且已经指定了一个锚标识（我认为）时，浏览器会自动滚动。