2011-01-21 3 views
2

J'utilise actuellement jQuery-Smooth-Scroll pour défiler en douceur vers différentes positions d'ancrage sur une de mes pages (Page 1). Cependant, ce que j'aimerais aussi pouvoir faire, c'est, à partir d'une autre page (Page 2), faire un lien vers Page1 (en ajoutant #bookmark à l'url) et avoir jQuery-Smooth-Scroll sur le fait que j'appelle la page avec un #bookmark et faites-le défiler en douceur vers la position appropriée une fois que la page a terminé le chargement. Je ne sais pas si c'est une possibilité ou non?Utiliser jQuery-Smooth-Scroll d'une page à l'autre?

Ceci est la version lisse de défilement que j'utilise:

https://github.com/kswedberg/jquery-smooth-scroll

Je suis encore relativement nouveau pour jQuery afin que je puisse être sur quelque chose évidente.

Répondre

3

Il est possible que vous souhaitiez placer un appel dans la fonction de défilement lorsque la page est chargée. dans jQuery, il utilise $ (document) .ready (function() {votre code});

Vous aurez besoin de mettre quelque chose pour analyser votre URL pour extraire le #bookmark, puis appeler le défilement lisse.

+0

Excellent, merci. Je ne pense pas que vous sauriez comment faire cela en utilisant javascript (je veux dire, extraire le #bookmark de l'url)? – marcusstarnes

7

réponse de Ajma devrait être suffisant, mais pour être complet:

alert(location.hash) 

Edit: un exemple plus complet:

// on document.ready { 
if (location.hash != '') { 
    var a = $("a[name=" + location.hash.substring(1) + "]"); 
    // note that according to w3c specs, the url hash can also refer to the id 
    // of an element. if so, the above statement becomes 
    // var a = $(location.hash); 
    if (a.length) { 
     $('html,body').animate({ 
      scrollTop: $(a).offset().top 
     }, 'slow'); 
    } 
} 
// } 
+0

Merci pour les informations supplementaires a ce sujet. Je vois un problème cependant où il semble que la simple présence d'un hachage dans l'URL semble le faire descendre directement à ce signet sur la page, plutôt que de le laisser à la jquery de gérer en utilisant le défilement lisse. Je me demande si au lieu de lier à Page1 de Page2 aveC#bookmark dans l'URL, si je vais devoir utiliser quelque chose comme? Bookmark, alors cherchez un? au lieu de hachage, puis faites défiler en douceur jusqu'à ce signet qu'il a trouvé après le? – marcusstarnes

+0

c'est la localisation.search pour le truc après? – ajma

+0

Je vois le problème. Vous pouvez utiliser un faux hachage qui n'existe pas réellement dans le document (# detail-foo), puis laisser jQuery faire défiler jusqu'à 'div [id = detail]' ou 'a [name = detail]', mais ce n'est pas élégant . Il vaut vraiment la peine de poster comme une question distincte. –

Questions connexes