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

Question

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

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

我已经使用锚点 link 使这些部分可访问，因此网站对这些 div 进行了 link。

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

$(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。我想要发生的是，如果我单击 link，它应该转到位于左侧或右侧（屏幕外）的 Div，它会向左或向右进行类似的无缝平滑滚动，同时保持相同 up/down 动画.

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

我需要做哪些更改或添加才能应用它？

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

$(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

我最终找到了这个问题的答案，并将post整理出来以供将来参考和帮助。

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

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

垂直滚动：

$(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 用于将 class 分配给 link;

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

Class在js文件中引用如上图；

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

我遇到的问题如下。纵横代码冲突。他们都用过;

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

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

将其更改为；

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

并将 classes 引入我的 links 我可以指定哪些 links 应该触发哪个 JS 文件并按预期工作。

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

欢迎提问。 :)

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

How to Implement both Horizontal and Vertical Smooth Scrolling

javascript

jquery

scroll

jquery-animate

smooth-scrolling