11499 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Je découvre le monde du javascript et je cherche à rafraichir le scroll de ma page body après un load .html dans une div.

Explication :

Je charge une page "creations.html" dans une div "#containercrea" situé la page index.html :

$('a.creative').on('click', function() {

  var url = $(this).attr('href');

  $('#containercrea').load('creations.html');

});


Et je vide par la suite la div "#containercrea" au click du menu "zw-nav" :

$('#zw-nav').on('click', function() {

var url = $(this).attr('href');

   $('#containercrea').empty('creations.html');

});


Tout fonctionne, sauf que les valeurs des #ancres du scroll sont perdus puisque l'insertion du contenu de la div change la hauteur de la page donc le positionnement des div de la page index.html
Le menu avec les ancres ne fonctionne donc pas correctement, il est perdu !
j'ai essayé de faire un refresh du body :

$('a.creative').on('click', function() {

  var url = $(this).attr('href');

  $('#containercrea').load('creations.html');

  $( 'body' ).scrollspy( 'refresh' );

});


Mais
$( 'body' ).scrollspy( 'refresh' );
ne fonctionne pas n'y
$( 'body' ).scrollTo( 'refresh' );



J'ai utilisé ce template http://www.youxithemes.com/themes/leviate qui utilise les librairies jquery scrollspy et scrollTo.

J'ai passé des heures, des journées à essayer de trouver mais le scroll ne fonctionne toujours pas.

Si ça peut aider, voici les morceaux de script avec le mot "scroll" que j'ai trouvé dans le js utilisé par le template (leviate.js).

/* ==========================================================================

ScrollSpy

============================================================================= */

if( $.fn.scrollspy ) {

$( 'body' ).scrollspy({

target: '#zw-header'

});

$( window ).on( 'smartresize orientationchange', function() {

$( 'body' ).scrollspy( 'refresh' );

});

}

/* ==========================================================================

ScrollTo

============================================================================= */

if( $.fn.scrollTo ) {

$( '#zw-nav, #work, #zw-header .brand, .slider-block .slide-link' ).on( 'click', 'a[href^="#"]', function(e) {

var href = $( this ).attr( 'href' );

var target = href === '#'? 0 : $( href );

$( window ).scrollTo( target,  {

duration: $.isHandheld? 0 : 400

});

e.preventDefault();

});

}

Merci de bien vouloir m'aiguiller. Smiley biggrin

Bonne journée

Morgan
Modifié par designer (11 Jul 2013 - 08:31)