Блог

Последние несколько дней я работаю над автоматической функцией плавной прокрутки в JS, которая прокручивается до контейнера div (контейнер должен быть центрирован на экране, а не как плавное поведение CSS).

Я нашел десятки решений, но ни одно из них не сработало в моем случае..

У меня есть небольшое выпадающее меню, которое содержит ссылки на divs на странице родительского элемента. Пользователь должен иметь возможность щелкнуть по любой из этих ссылок, а затем перейти на ту же страницу, но с другим событием прокрутки..

например, если он нажимает на «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>
  

Я благодарен и открыт для любых подсказок и предложений, независимо от того, насколько они малы!

С наилучшими пожеланиями!

Каждый должен начинать с чего-то, верно? ^^

Я чувствую, что проблема в том, что, хотя вы правильно указываете URL-адреса, вы не указали свои идентификаторы привязок. Хотя запрашивается URL /dist/htmls/leistungen.html#Herren -адрес, элемента с идентификатором «Herren» нет.

Каждая привязка a-url-link-and#someAnchor будет искать элемент с идентификатором #someAnchor

Также, пожалуйста, имейте в виду, что:

• Привязочные ссылки и идентификаторы чувствительны к регистру
• Когда загружается новая страница и уже указан идентификатор привязки (я думаю), браузер будет автоматически прокручиваться.