Question

我花了最后几个小时浏览Google上的页面和页面，遵循无尽的教程，没有任何工作。

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

有问题的div，其中3个是基于文本的，1是另一个按钮。这些按钮是自定义的，因此它们保存一个css值，将其指向Media文件夹中的图像和翻转文件。只是这样说，因为我使用的很多教程都坚持使用＆lt; H1＆GT;标签或＆lt; UL＆GT; /＆LT;李＆GT;等...

这是页面顶部按钮的行，在点击后会平滑滚动到另一个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可能是您的选择。它很漂亮。

平滑滚动到div相关

2 个答案: