jQuery faites défiler JUSQU'à L'ID de la page différente

Sur le lien mettre un hachage:

<a href="otherpage.html#elementID">Jump</a>

Et sur une autre page, vous pouvez faire:

$('html,body').animate({
  scrollTop: $(window.location.hash).offset().top
});

Sur une autre page, vous devriez avoir un élément avec id défini sur elementID pour faire défiler vers. Bien sûr, vous pouvez changer le nom de celui-ci.

En combinant les réponses de Petr et Sarfraz, j'arrive à ce qui suit.

À la page1.html:

<a href="page2.html#elementID">Jump</a>

Sur la page2.html:

<script type="text/javascript">
    $(document).ready(function() {
        $('html, body').hide();

        if (window.location.hash) {
            setTimeout(function() {
                $('html, body').scrollTop(0).show();
                $('html, body').animate({
                    scrollTop: $(window.location.hash).offset().top
                    }, 1000)
            }, 0);
        }
        else {
            $('html, body').show();
        }
    });
</script>

Je recommande d'utiliser le plugin scrollTo

Http://demos.flesler.com/jquery/scrollTo/

Vous pouvez définir le scrollto par le sélecteur CSS jquery.

$('html,body').scrollTo( $(target), 800 );

J'ai eu beaucoup de chance avec la précision de ce plugin et de ses méthodes, où d'autres méthodes pour obtenir le même effet comme l'utilisation de .offset() ou .position() n'ont pas réussi à être cross browser pour moi dans le passé. Ne pas dire que vous ne pouvez pas utiliser de telles méthodes, je suis sûr qu'il y a un moyen de le faire cross browser, j'ai juste trouvé scrollTo pour être plus fiable.

J'ai fait un plugin réutilisable qui peut le faire... J'ai laissé la liaison aux événements en dehors du plugin lui-même parce que je pense qu'il est trop intrusif pour un si petit assistant....

jQuery(function ($) {

    /**
     * This small plugin will scrollTo a target, smoothly
     *
     * First argument = time to scroll to the target
     * Second argument = set the hash in the current url yes or no
     */
    $.fn.smoothScroll = function(t, setHash) {
        // Set time to t variable to if undefined 500 for 500ms transition
        t = t || 500;
        setHash = (typeof setHash == 'undefined') ? true : setHash;

        // Return this as a proper jQuery plugin should
        return this.each(function() {
            $('html, body').animate({
                scrollTop: $(this).offset().top
            }, t);

            // Lets set the hash to the current ID since if an event was prevented this doesn't get done
            if (this.id && setHash) {
                window.location.hash = this.id;
            }
        });
    };

});

Maintenant, nous pouvons onload juste faire ceci, vérifier un hachage et si c'est là essayer de l'utiliser directement comme sélecteur pour jQuery. Maintenant, je ne pouvais pas facilement tester cela à l'époque, mais j'ai fait des choses similaires pour les sites de production il n'y a pas longtemps, si cela ne fonctionne pas immédiatement, faites-le moi savoir et je vais regarder la solution que j'ai obtenue y.

(le script doit être dans une section onload)

if (window.location.hash) {
    window.scrollTo(0,0);
    $(window.location.hash).smoothScroll();
}

Ensuite, nous lions le plugin à onclick des ancres qui ne contiennent qu'un hachage dans leur attribut href.

(le script doit être dans une section onload)

$('a[href^="#"]').click(function(e) {
    e.preventDefault();

    $($(this).attr('href')).smoothScroll();
});

Puisque jQuery ne fait rien si le match lui-même échoue, nous avons une bonne solution de repli pour quand une cible sur une page ne peut pas être trouvée yay \ o /

Mise à Jour

Gestionnaire onclick alternatif pour faire défiler vers le haut quand il n'y a qu'un hachage:

$('a[href^="#"]').click(function(e) {
    e.preventDefault();
    var href = $(this).attr('href');

    // In this case we have only a hash, so maybe we want to scroll to the top of the page?
    if(href.length === 1) { href = 'body' }

    $(href).smoothScroll();
});

Voici aussi un simple jsfiddle qui démontre le défilement dans la page, onload est un peu difficile à mettre en place...

Http://jsfiddle.net/sg3s/bZnWN/

Mise à Jour 2

Vous pourriez donc avoir des problèmes avec la fenêtre qui défile déjà vers l'élément onload. Cela corrige que: window.scrollTo(0,0); il fait simplement défiler la page vers le haut à gauche. Ajouté à l'extrait de code ci-dessus.

function scroll_down(){
    $.noConflict();
    jQuery(document).ready(function($) {
        $('html, body').animate({
            scrollTop : $("#bottom").offset().top
        }, 1);
    });
    return false;
}

Ici "bottom" est l'id de balise div où vous voulez faire défiler. Pour changer les effets d'animation, vous pouvez changer l'Heure de '1' à une valeur différente

J'ai écrit quelque chose qui détecte si la page contient l'ancre sur laquelle on a cliqué, et sinon, va à la page normale, sinon elle défile vers la section spécifique:

$('a[href*=\\#]').on('click',function(e) {

    var target = this.hash;
    var $target = $(target);
    console.log(targetname);
    var targetname = target.slice(1, target.length);

    if(document.getElementById(targetname) != null) {
         e.preventDefault();
    }
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top-120 //or the height of your fixed navigation 

    }, 900, 'swing', function () {
        window.location.hash = target;
  });
});