單擊鏈接時在導航中使用jQuery - 轉到目標頁面，然后滾動到頁面的特定部分

Question

好的，所以我一直在這里四處看看並發布了一些類似的問題，但無法理解我遇到的問題的答案。 如果這是重復其他人發布的問題，那么道歉。

我遇到的問題;

我有一個多頁網站，我正在Concrete5平台上構建。 我有幾個部分 - 家庭，產品，關於和聯系。

在about頁面中有3個部分（我們是誰，產品開發和我們的故事） - 所有這些部分都被設置為100vh並填充屏幕，然后使用允許鼠標滾輪的jQuery滾動功能滾動這些部分用於向上和向下滾動（頁面一次滾動整個100vh部分） - 所以它具有與此相同的效果 - http://www.bang-olufsen.com/en - 它也包含類似的'點'可以點擊向上或向下滾動。 我使用ID來獲取此信息。

我需要的是在about選項卡上，在導航中 - 它有一個包含三個部分鏈接的子菜單（目前這些鏈接都在about頁面的頂部）。

我已經嘗試了這個www.example.com/about#our-story等 - 這不起作用，因為Concrete5似乎把它讀作一個新頁面，只顯示一個沒有內容的空白頁面。

所以我需要的是子菜單鏈接將用戶帶到頁面，然后一旦加載 - 去找相關部分，即如果用戶點擊“我們的故事”鏈接，它將轉到關於頁面，然后向下滾動到我們的故事部分。

有任何想法嗎？

對於能夠提供解決方案的任何人，我都不會知道你是誰。 如果您正在尋找付款，我可以告訴您我沒有錢。 但我所擁有的是一套非常特殊的技能，我在很短的職業生涯中獲得的技能。 讓我作為jQuery開發人員變得非常糟糕的技能。 如果你現在幫助我，那就結束了。 但是，如果你不這樣做，我將在接下來的幾個小時 - 也許是幾天，如果你幫助我我會不會，我會欠你的：P

謝謝

Answer 1

您可以像這樣使用jQuery Animtion：

 <script>
        $(document).ready(function () {
            $("html, body").animate({ scrollTop: $('.MySecondSection').offset().top - 90 }, 2000, function () {
            });
        });

    </script>

編輯 ：

<script>
                $("#myClickableItem").click(function () {
                    $("html, body").animate({ scrollTop: $('.MySecondSection').offset().top - 90 }, 2000, function () {
                    });
                });
    </script>

-90表示導航欄的高度。 你可以跳過或改變它。

編輯：

  $("#myClickableItem").click(function() { $("body").animate({ scrollTop: $('#div2').offset().top }, 2000, function() {}); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="div1" style="width:100%;height:500px;float:right;background-color:#ffeeee"> <span id="myClickableItem" style="cursor:pointer;">Click Me!</span> </div> <div id="div2" style="width:100%;height:500px;float:right;background-color:#eeffee">2</div> 

請把這個片段扯掉。

Answer 2

你只需要一個HTML鏈接錨嗎？

創建一個<a href="#anyword">Jump to any place</a>的鏈接

然后，您需要在要跳轉到的頁面中的目標位置：

<a name="anyword">Jump to this place</a>

Answer 3

您需要提供類似www.example.com/about.html#our-story的頁面擴展名