开始的条件函数：Ariel Flesler 的 SerialScroll 中的设置

Question

站点位于@beattrainsoundsystem.com/home

我正在使用serialScroll 为许多包含舞蹈角色的div 制作动画，并使用LocalScroll 为内容div 制作动画。我的问题是，当您尝试加载带有哈希值的 URL（例如beattrainsoundsystem.com/home#store）时，角色 div 不会动画到正确的位置。我知道要实现这一点，我需要为“start:”设置创建一个条件函数，以根据 URL 中的哈希值更改“start:”值。作为 jQuery 的新手，我不太确定如何编写此代码。

我已经在使用 URI 解析器插件来返回 URL 中的哈希值，因此对于“http:// www.beattrainsoundsystem.com/home#store”

var urlHash = $.url.attr('anchor');

将返回“store”

所以我需要的是一个函数，它说：

if (urlHash == home) {
     var start = 0
} else if (urlHash == mixes) {
     var start = 1,
} else if (urlHash == contact) {
     var start = 2,
}

这显然没有正确编码，但它是我需要使此工作的脚本的概念化。

感谢您的帮助！

Answer 1

您可能应该将其与 localScroll 集成。如果调用$.localScroll.hash()，它将滚动到哈希指向的元素，并将更改通知serialScroll。

Answer 2

它并没有直接跳到我身上，我试图找到顶部链接的点击事件正在处理的地方，所以我可以给出一个具体的例子。

看起来动画不起作用的唯一一次是当我直接转到 URL 中包含哈希值的某个页面时。因此，我可能会这样做：

1. 在页面加载时，从 URL 中获取 #name
2. 查找其 href = 我获取的名称的元素（您将它们命名为相同，最好是给这些 一个 id，例如
3. 在该元素上执行 click() 事件以模拟正常动画方法

如果您希望它加载到正确的位置而不显示动画，那么这并不理想

您应该能够执行以下操作：

$(document).ready(function(){
      // This whole part is pseudocode since I didn't spend
      // the time to find exactly how you're doing things

      // get the hash portion from the URL
      // (just copying you here, haven't done this myself)
      var sourceLinkHref = $.url.attr('anchor');

      // Find the <a> tag whose href attribute matches the
      // name you just found, and .click() it
      $("a[href=#" + sourceLinkHref + "]")
          .click();
   });

Answer 3

jQuery(function( $ ){
var urlHash = $.url.attr('anchor');
if (urlHash=="mixes") {
    $("#sectionsContent").scrollTo( $("#mixes"), 0 );
    $("#sectionsMid").scrollTo( $("#mixmid"), 0 );
    $("#sectionsTop").scrollTo( $("#mixTop"), 0 );
    $("#sectionsBottom").scrollTo( $("#mixBottom"), 0 );
}

if (urlHash=="contact") {
    $("#sectionsContent").scrollTo( $("#contact"), 0 );
    $("#sectionsMid").scrollTo( $("#storemid"), 0 );
    $("#sectionsTop").scrollTo( $("#storeTop"), 0 );
    $("#sectionsBottom").scrollTo( $("#storeBottom"), 0 );
}

if (urlHash=="store") {
    $("#sectionsContent").scrollTo( $("#store"), 0 );
    $("#sectionsMid").scrollTo( $("#blogmid"), 0 );
    $("#sectionsTop").scrollTo( $("#blogTop"), 0 );
    $("#sectionsBottom").scrollTo( $("#blogBottom"), 0 );
}

});