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');

将返回“商店”

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

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中有哈希的页面。所以，我可能会这样做：

在页面加载时，从URL
找到其href =我抓住的名称的元素（你将它们命名为相同的，更好的是给那些<a href="#name">一个id，例如<a id="name" href="#name">
对该元素执行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 );
}

}）;

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

3 个答案: