＃链接两个兄弟页面不会滚动到右边的部分

Question

我正在使用Bootstrap和Django开发页面。

我有两页：宠物和猫。两者都在导航栏中。 宠物有几个部分，包括猫。 当我在导航栏中单击Cats时，我希望它加载Pets页面并向下滚动到Cats部分。

我的宠物页面包含以下代码：

    <div class="section" id="cats">
        <div class=" centred auto">
            <h1 class="h1">Cats</h1>
            <p>Here you can find pictures of cats</p>
        </div>
    </div>

导航栏的Cats部分具有以下代码：

        <li class="active">
                <a class="dropdown-item" href="{% url 'pets' %}#cats">CATS</a>
        </li>

现在，当我在“宠物”页面上点击导航栏中的“猫”时，它会向下滚动到“猫”。

当我在我的网站上的任何其他页面上，单击导航栏中的Cats时，它会将我带到“宠物”页面，但不会向下滚动。

我正在运行测试服务器，我在Chromium，Chrome和Firefox上试过这个。

知道为什么/如何解决这个问题？

Answer 1

在我的情况下，将CSS添加到页面的代码被证明是罪魁祸首。

当页面上线时，它按预期工作。

我们认为这是动态较少编译器的问题，但我们还没有进行必要的测试，以确定为什么会发生这种情况。