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文件。例如＆＃39;向上＆＃39;是我的上/下自动滚动;

垂直滚动：

$(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文件并按预期工作。

我希望这可以帮助任何有类似问题的人或只是寻找一些自动滚动的帮助。

随意提问。：）

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

1 个答案: