如何实现水平和垂直平滑滚动

Question

我一直在整理一个个人项目。我对 Java 还比较陌生，所以边走边学。

基本上，我创建了一个网站，其中包含我希望沿 x 和 y 轴访问的部分。

我已使用锚链接使这些部分可访问，因此该网站确实链接到这些 div。

我还设法设置了垂直平滑滚动动画。所以我的页面可以使用以下代码自动上下滚动：

$(document).ready(function(){
$('a[href^="#"]').on('click',function (e) {
    e.preventDefault();

    var target = this.hash;
    var $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 900, 'swing', function () {
        window.location.hash = target;
     });
    });
  });

但是，我似乎无法获得相同的滚动效果来申请位于左/右的 div。我想要发生的事情是，如果我单击一个链接，该链接应该转到位于左侧或右侧（屏幕外）的 Div，它会在保持相同的向上/向下动画的同时向左或向右进行类似的无缝平滑滚动。

基本上我想在同一页面上同时应用垂直和水平平滑滚动。

我需要进行哪些更改或添加才能应用此功能？

---

通过对上述代码进行一些调整，我设法在我的网站上实现了水平滚动。

$(document).ready(function(){
  $('a[href^="#"]').on('click',function   (e) {
   e.preventDefault();

var target = this.hash;
var $target = $(target);

$('html, body').stop().animate({
     'scrollLeft': $target.offset().left
}, 900, 'swing', function () {
    window.location.hash = target;
     });
     });
   });

这似乎适用于水平滚动。现在我需要让这些同时工作......

我已将两者添加到一个单独的文件中，并在我的 HTML 中引用了它们。然而现在只有水平的作品。无论如何要让两者同时工作？

Answer 1

我最终设法找到了答案，并将其发布以供将来参考和帮助。

基本上，当我说我想同时使用垂直和水平自动滚动时，我并不是在谈论对角线自动滚动。我只是说我在一个页面上有多个链接。有些应该沿着 Y 轴自动滚动到不同的部分，有些应该沿着 X 轴自动滚动。

为此，我使用以下代码创建了 2 个 Js 文件，并在我的 html 中引用了它们。我还在我的所有链接上定义了一个类来指定应该关联哪个 js 文件。例如'up' 用于我的上/下自动滚动；

垂直滚动：

$(document).ready(function(){
$('a.up').on('click',function (e) {
    e.preventDefault();

    var target = this.hash;
    var $target = $(target);

    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 3000, 'swing', function () {
        window.location.hash = target;
    });
  });
});

横向卷轴：

$(document).ready(function(){
  $('a.left').on('click',function (e) {
    e.preventDefault();

    var target = this.hash;
    var $target = $(target);

    $('html, body').stop().animate({
        'scrollLeft': $target.offset().left
    }, 3000, 'swing', function () {
        window.location.hash = target;
    });
  });
});

用于将类分配给链接的 HTML；

<a class="up" href="#tutorial">Link</a>

js文件中引用的类如上图；

$('a.up').on('click',function (e)

我遇到的问题如下。垂直和水平代码冲突。两个都用过；

 $('a[href^="#"]').on('click'

这意味着当点击链接时，它会执行操作。当链接被触发时，没有什么可以区分动作应该向哪个方向进行。

通过将其更改为;

    $('a.up').on('click'

并在我的链接中引入类，我可以指定哪些链接应该触发哪个 JS 文件并按预期工作。

我希望这可以帮助遇到类似问题或只是寻求自动滚动帮助的任何人。

随时提问。 :)