平滑滾動到div相關

Question

在無休止的教程之后，我花了最后幾個小時瀏覽Google上的頁面和頁面，但沒有任何效果。

我需要做的就是在頂部放一個按鈕，例如“ Social”（共有4個按鈕，但在此示例中，我將簡要介紹一下並使用其中一個按鈕）。 用戶單擊“所述”按鈕后，它立即（平滑）滾動到頁面下方的另一個div。

所討論的div，其中3個基於文本，1個是另一個按鈕。 這些按鈕是自定義的，因此它們包含一個css值，該值將其指向Media文件夾中的圖像和翻轉文件。 之所以這么說是因為我使用的許多教程都使用<h1>標簽或<ul> / <li>等卡住了...

這是頁面頂部的按鈕行，在單擊時，將平滑滾動到另一個div：

<div id="socialbutton"><a  draggable="false" title="Social Media"></a></div>

這是它應該滾動到的行：

<div id="Abutton"><a  href="External Link" draggable="false" title="Visit my Abutton"></a></div>

*請注意，出於隱私目的，我已將值更改為“ Abutton”，如果出現解決方案，我可以在需要的地方進行編輯。

最好是我希望它滾動到div的頂部，我嘗試完全切斷數百個垂直像素的一種方法。

抱歉，如果其中任何一個是錯誤的，我幾乎會簽約詢問這個問題，我的編碼能力充其量是苗條的（我更多地在網頁設計方面），但最終我仍然設法將頁面放在一起。 但是，這個問題使我完全難過。

如果有幫助，我的頭部確實有最新的JQuery庫作為腳本。

Answer 1

應該做到這一點：

$(document).ready(function() {
    $("#socialbutton").click(function() {
        $('html, body').animate({
            scrollTop: $("#Abutton").offset().top
        }, 2000);
    });
});

只需將上面的代碼放在您的<script>標記之間（如果位於頁面底部，則不需要document.ready包裝器-但我認為如果您不太精通JS / jQuery，我會包括在內）

Answer 2

Fullpage.js可能是您的選擇。 非常漂亮。