jQuery动画垂直滚动到一个元素和水平滚动到不同的元素在同一时间从单个哈希标签/变量

jQuery animated vertical scroll to one element and horizontal to different element at the same time from a single hash tag/variable

本文关键字：元素 滚动 同一时间 变量 标签 单个哈 垂直 动画 水平 jQuery 一个      更新时间：2023-09-26

我是一个jQuery新手，但已经非常接近实现我的结果。基本上，我要做的是以下过程:

From page load #anchor:

  • 将哈希值转换为ID和类
  • 垂直滚动到锚ID为
    • 的元素
  • 水平滚动到具有
    • 类的其他元素

此外，同样的功能在页面上也可以工作。我试图直接链接到url。所以动画效果在加载时也能起作用是很重要的。

我的例子在这里:http://willminnig.com/stacko/vertical-test-5.html#1908

到目前为止，我可以让它在页面加载时滚动到垂直ID，但不能滚动到水平类，也可以在页面完全加载后滚动到垂直ID。在页面完全加载后，它也会在第一次滚动到类，但在第一次之后是不稳定的行为。

这是我的(凌乱的)jQuery:

$(window).bind("load", function() {
    var mainhash = window.location.href.split("#")[1];
    $('html, body').animate({
        scrollTop: $('#'+mainhash).offset().top
    }, 900, 'swing');       
$('a[href^="#"]').bind('click',function() {
    var target = this.hash; //target is whole #hash
    var whatever = '.pics .'+this.hash.split("#")[1];
    $whatever = $(whatever);
    $target = $(target); //$target is $(#hash)
    $('.pics').animate({ 
        scrollLeft: $whatever.offset().left
    }, 900, 'swing');

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

});

任何专业人士解释我做错了什么，将不胜感激!此外，如果推荐的话，我可以改变滚动到元素的方式。类/ID/散列只是我能想到的最好的。非常感谢大家!

要在加载时触发水平滚动，您需要做的就是触发对id等于'mainhash'的元素的单击。您可以通过在'load'处理程序的末尾添加这一行来实现这一点:

$('#'+mainhash).trigger('click');

至于不稳定的滚动，嗯，这有点复杂。不管美元的偏移()。Left是$whatever到窗口左侧的距离，而不是它到。pics左侧的距离。当.pics . scrollleft()为0时。当'1900'与左对齐时，你的动画将正常工作，否则它将无法正常工作。我认为解决方案是将.pics . scrollleft()添加到$whatever的offset()。这样你就可以得到$whatever的值在。pics:

左边的偏移量
scrollLeft: ($('.pics').scrollLeft() + $whatever.offset().left)

另外，我认为你在#picswrap和。pics上设置的200%宽度正在造成严重破坏，尽管我无法准确解释原因。我觉得应该改成100%

相关文章：