平滑滚动到div相关
提问于 2014-05-22 23:28:43
在过去的几个小时里，我在Google上浏览了一页又一页，看了一遍又一遍的教程，但什么都不起作用。
我需要做的就是让它在顶部有一个按钮，比如“社交”(有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的顶部，这是我尝试过的一种方法，它完全切断了几百个垂直像素。
抱歉，如果这一切都是错的，我很想问这个问题，我的编码能力充其量是很低的(我更多的是在网页设计方面)，但我最终还是设法把一个页面组合在一起。然而，这个问题让我完全被难住了。
如果有帮助的话，我在head部分有最新的JQuery库作为脚本。
回答 2
Stack Overflow用户
发布于 2014-05-22 23:32:33
应该做到这一点：
$(document).ready(function() {
$("#socialbutton").click(function() {
$('html, body').animate({
scrollTop: $("#Abutton").offset().top
}, 2000);
});
});只需将上面的代码放在<script>标记之间(如果在页面底部，则不需要document.ready包装器--但如果您不太精通JS/jQuery，我想我会包含它)。
Stack Overflow用户
发布于 2014-05-23 00:29:39
Fullpage.js可能是您的一个选择。它相当的圆滑。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23818706
复制
腾讯云开发者
