javascript - 有没有一个js函数可以左右上下滚动网站？

Question

我想知道是否有人知道是否有 javascript 或在单击时左右上下滚动网站的东西。

例如，我想创建一个包含多个 div 的网站。看看下面的照片。

我希望每个 div 都适合屏幕，并且 div 1 是主 div，即起点。假设我在传记菜单中有一个链接，传记的内容在 div 4 中，有人点击传记，我希望网站向下移动到 div 3，然后向右移动到 div 4，同样的事情也适用于 div 4 和所有的div。当有人单击 div 中的链接时，我希望网站按我指定的方向滚动，这可能吗？

左 右 上 下

Answer 1

jquery animate 函数是正确的方法。

在这里您可以找到有关如何使用它的简单明了的教程：http ://gazpo.com/2012/03/horizo​​ntal-content-scroll/

本教程仅适用于水平滚动，但您可以轻松扩展以在两个方向（同时垂直和水平）滚动页面。

Answer 2

对，他们是：

1. .scrollLeft()
2. .scrollRight()

Answer 3

使用 jQuery，您可以为body'scrollTop值设置动画以上下滚动：

$("html,body").animate({
    scrollTop: $("#bio").offset().top
}, 1000);

上面的代码将滚动到带有idof的元素#bio。

在横向滚动方面，我想你可以使用一个小技巧。将 body 设置overflow-x为hidden隐藏任何溢出到浏览器视口右侧的内容。然后您可以将 调整margin-left为body向右或向左“滚动”。但是，当然，这消除了用户滚动浏览所有 div 的能力。

$("body").animate({
    marginLeft: "-100%"
}, 1000);

Answer 4

你可以使用 jquery animate 函数，它会给你更多的控制

  $('#div').animate({
    left: '+=50'
  }, 5000, function() {
    // Animation complete.
  });

阅读更多来自 - http://api.jquery.com/animate/