平滑滚动到 div 相关

Question

在过去的几个小时里，我一直在浏览 Google 上的页面和页面，遵循无穷无尽的教程，但没有任何效果。

我需要做的就是在顶部设置一个按钮，例如“社交”（有 4 个，但在本例中我会保持简短并使用一个）。用户单击“所述按钮”后，它会立即（平滑地）滚动到页面下方的另一个 div。

有问题的 div，其中 3 个是基于文本的，1 个是另一个按钮。这些按钮是自定义的，因此它们包含一个 css 值，该值将其指向 Media 文件夹中的图像和翻转文件。之所以这么说，是因为我用过的很多教程都卡在

标签或

/
• 等...

  这是页面顶部的按钮行，点击后将平滑滚动到另一个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 的顶部，我尝试的一种方法完全切断了数百个垂直像素。

  如果其中有任何错误，我深表歉意，我非常愿意提出这个问题，我的编码能力充其量是微不足道的（我更多的是在网页设计方面）但我仍然设法最终将一个页面放在一起.然而，这个问题让我完全难住了。

  如果有帮助，我确实在 head 部分中有最新的 JQuery 库作为脚本。

Answer 1

Fullpage.js 可能是您的选择。挺好看的。

Answer 2

应该做的伎俩：

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

只需将上面的代码粘贴在您的 <script> 标签之间（如果在页面底部，则不需要 document.ready 包装器 - 但我想如果您不太精通 JS/ jQuery)