平滑滾動到div相關

Question

我花了幾個小時瀏覽Google上的頁面和頁面，遵循無數的教程，沒有任何工作。

我需要做的就是在頂部有一個按鈕，比如'Social'（有4個，但在這個例子中我會保持簡短並使用一個）。當用戶點擊'所述按鈕時，它立即滾動（平滑）到頁面下方的另一個div。

該問題的div，其中3個是基於文本的，1是另一個按鈕。這些按鈕是自定義的，因此它們保存一個css值，將其指向Media文件夾中的圖像和翻轉文件。只是說，因爲很多我用已經堅持了< h1>標記或< ul>/< LI>等方面的教程...

這裏是按鈕的頁面頂部的線，其中，在點擊後會平滑滾動到其他分區：

<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可能是你的選擇。這很漂亮。