Как исправить гиперссылку на ярлык подстраницы?Bootsrap 4

Question

Я работаю над своим первым большим проектом. Я построил почти все, но в меню есть проблемы. При нажатии на ссылку в меню открывается подстраница, но она не переходит на ярлык.

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" data-target="dropdown_target" href="#">
    <span class="caret"></span>
Nurty</a>
<div class="dropdown-menu aria-labelledby=dropdown_target">
    <a class="dropdown-item" href="/nurty.html">Techouse</a>
    <a class="dropdown-item" href="/nurty.html#minit">Minimal</a>
    <a class="dropdown-item" href="/nurty.html#classt">Classic</a>
    <a class="dropdown-item" href="/nurty.html#detrt">Detroit</a>
    <a class="dropdown-item disabled" href="/nurty.html#hardgroove">Hardgroove</a>
    <a class="dropdown-item" href="/nurty.html#hart">Hard</a>
</div>

На подстранице я хочу перейти, например, к этому ярлыку:

<section id="minit">

Но все еще не работает.

Как я могу это исправить или, может быть, есть другой способ сделать это?

Answer 1

это рабочий пример вашей потребности, я также добавил плавную прокрутку, добавив css smooth-behavior: smooth, я добавил 1500px высоту для ясного представления вашей проблемы

Index.html

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">


<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" data-target="dropdown_target" href="#">
        <span class="caret"></span>
        Nurty
    </a>
    <div class="dropdown-menu aria-labelledby=dropdown_target">
        <a class="dropdown-item" href="example.html">Techouse</a>
        <a class="dropdown-item" href="example.html#minit">Minimal</a>
        <a class="dropdown-item" href="example.html#classt">Classic</a>
        <a class="dropdown-item" href="example.html#detrt">Detroit</a>
        <a class="dropdown-item disabled" href="example.html#hardgroove">Hardgroove</a>
        <a class="dropdown-item" href="example.html#hart">Hard</a>
    </div>
</li>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

example.html

<style>
html {
    scroll-behavior: smooth;
}
</style>

<div style="height: 1500px;"></div> <!-- FOR SCROLL VIEW -->
<section id="minit">scroll or die</section>