Fonction conditionnelle pour Début: mise en SerialScroll

Question

Site d'Ariel Flesler est situé @ beattrainsoundsystem.com/home

J'utilise serialScroll pour animer un certain nombre de divs contenant des caractères de danse, et en utilisant LocalScroll pour animer les divs de contenu. Mon problème est que lorsque vous essayez de charger une URL avec un hachage (par exemple beattrainsoundsystem.com/home#store) les divs de caractères ne s'animent pas à la bonne position. Je sais que pour ce faire, je dois créer une fonction conditionnelle pour le paramètre "start:", pour changer la valeur "start:" en fonction du hash de l'URL. En tant que débutant chez jQuery, je ne sais pas trop comment coder cela.

Je suis déjà en utilisant un plugin analyseur URI pour retourner le hachage dans l'URL, donc pour « http://www.beattrainsoundsystem.com/home#store »

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

retournera « magasin »

Alors, que j'ai besoin est une fonction qui dit:

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

Ceci n'est évidemment pas codé correctement, mais c'est une conceptualisation du script dont j'ai besoin pour que cela fonctionne.

Merci pour votre aide!

Answer 1

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

});

Answer 2

Vous devriez probablement l'intégrer avec localScroll. Si vous appelez $ .localScroll.hash(), il défilera jusqu'à l'élément pointé par le hachage et notifiera la modification de serialScroll.

Answer 3

Il ne me saute pas dessus où les événements de clic pour les liens en haut sont traités que j'essayais de trouver ainsi je pourrais donner un exemple spécifique.

Il semble que la seule fois où l'animation ne fonctionne pas, c'est quand je vais directement à une page qui contient le hachage dans l'URL. Alors, je pourrais faire quelque chose comme:

1. Sur chargement de la page, saisissez la #nom de l'URL
2. Trouver l'élément dont href = le nom que j'attrapé (vous les avez nommés identiquement, mieux serait de donner ceux <a href="#name"> un identifiant tel que <a id="name" href="#name">
3. Faites un événement click() sur cet élément pour simuler la méthode normale d'animation

Ce n'est pas idéal si vous voulez charger dans la position correcte sans montrer une animation

Vous devriez être en mesure de faire quelque chose comme ceci:

$(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(); 
    });