défilement lisse vers un div dans une page html différente

Question

J'ai une barre de menu dans chacune des pages et quand je clique sur l'un des sous-éléments, je veux que la page redirige vers l'autre html et défile doucement vers ce spécifique div. J'utilise ce code pour avoir faire défiler facilement dans les divs d'une page:

$(function() { 
    $('a[href*=#]:not([href=#])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 

     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('html,body').animate({ 
      scrollTop: target.offset().top 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
}); 

Est-il possible de modifier ce code afin que je suis en mesure de ce que je vous demande?

Answer 1

Utilisez les balises d'ancrage et ce:

$(function() { 
    $('a[href*=#]:not([href=#])').click(function() { 
     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('html,body').animate({ 
      scrollTop: target.offset().top 
     }, 1000); 
    return false; 
    } 
} 
}); 
}); 

voir ceci: view-source: http://css-tricks.com/examples/SmoothPageScroll/

J'ai trouvé simething pour la page attrapant

var match = location.hash.match(/^#?(.*)$/)[1]; 
if (match) 
{ 
    //call you smooth scroll code. Fake the link click etc 
} 

Answer 2

Lors de la recherche d'une solution, via google et stackoverflow, pour gérer le "smoothscrolling" aux ancres, il était évident qu'il existe de nombreuses solutions de même type. Traiter smoothscroll entre plusieurs ancres sur plusieurs pages semble être limité à un seul contrôle qualité sur stackoverflow. Cette solution, telle qu'elle a été présentée, n'a toutefois pas vraiment fonctionné pour moi. Alors que je suis juste en dessous du débutant dans la gestion de java et CSS, je voudrais transmettre une solution que j'ai concoctée en combinant plusieurs solutions en une qui fonctionne au moins sur Firefox et Chrome (non testé sur d'autres navigateurs).

J'espère que quelqu'un pourrait jeter un oeil à cela et offrir quelques suggestions à: 1) rendre plus cross-browser compatible 2) le nettoyer

Enfin, voici quelques-unes des conditions I ont fonctionner avec sans problème:

pages multiples - ancres multiples bootstrap 3 multiples fonctions jquery

il est mise en garde bien que j'ai posté ici en ce qui concerne les travaux de maçonnerie et de multiples points d'ancrage sur plusieurs pages: Anchors to pages with Masonry layouts

$(function() { 
    $('[data-toggle="elementscroll"]').click(function() { 
     if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
       && location.hostname == this.hostname) { 

      var target = $(this.hash); 
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
      if (target.length) { 
       $('html,body').animate({ 
        scrollTop: target.offset().top -57 //head space 
       }, 1000); //scroll speed 
       return false; 
      } 
     } 
    }); 
}); 

    $(function() { 
$('html, body').hide(); 
if (window.location.hash) { 
     setTimeout(function() { 
       $('html, body').scrollTop(0).show(); 
       $('html, body').animate({ 
         scrollTop: $(window.location.hash).offset().top -57 // head space 
         }, 1000) //scrollspeed 
     }, 0); 
} 
else { 
     $('html, body').show(); 
} 
    });