Bootstrap. При закрытии offcanvas, внутри которого scrollspy, т. е. навигационная панель со скроллом, возвращает на верх

Question

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <title>Document</title>
</head>

<body>
    <a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button"
        aria-controls="offcanvasExample">
        Link with href
    </a>

    <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <nav id="navbar-example2" class="navbar px-3">
                <a class="navbar-brand" href="#">Navbar</a>
                <ul class="nav nav-pills">
                    <li class="nav-item">
                        <a class="nav-link" href="#scrollspyHeading1">First</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#scrollspyHeading2">Second</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#scrollspyHeading3">Secd</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#scrollspyHeading4">Secnd</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#scrollspyHeading5">Sed</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#scrollspyHeading6">nd</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>

    <div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-offset="0" class="scrollspy-example"
        tabindex="0">
        <h4 id="scrollspyHeading1">First heading</h4>
        <p>...</p>
        <img src="static/images/hands.jpg" alt="">
        <h4 id="scrollspyHeading2">Second heading</h4>
        <p>...</p>
        <img src="static/images/hands.jpg" alt="">
        <h4 id="scrollspyHeading3">Third heading</h4>
        <p>...</p>
        <img src="static/images/hands.jpg" alt="">
        <h4 id="scrollspyHeading4">Fourth heading</h4>
        <p>...</p>
        <img src="static/images/hands.jpg" alt="">
        <h4 id="scrollspyHeading5">Fifth heading</h4>
        <p>...</p>
        <img src="static/images/hands.jpg" alt="">
    </div>


    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
</body>

</html>

БЛОГ НА HUSL

Bootstrap. При закрытии offcanvas, внутри которого scrollspy, т. е. навигационная панель со скроллом, возвращает на верх

Ответы (0 шт):