jQuery: Faites défiler jusqu'à l'ancre lors de l'appel URL, remplacer le comportement des navigateurs

Question

Je connais déjà le plugin jQuery ScrollTo, mais je ne trouve aucune façon jusqu'à maintenant réaliser ce qui suit:

Les utilisateurs arrive à mon site (en tapant, pas en cliquant sur un lien sur ma page) domain.com/bla.php#foo

et l'ancre "#foo" existe. Maintenant, je veux que le navigateur de l'utilisateur ne défile pas automatiquement « #foo », au lieu que je veux faire défiler en douceur afin que l'élément « #foo » est sur le point au milieu de la vue et pas sur la partie supérieure de la position absolue voir les utilisateurs.

Merci beaucoup!

Answer 1

Si vous ne créez pas le foo d'ancrage réelle, mais plutôt de créer votre point d'ancrage avec un id comme _foo (quelque chose comme <a id="_foo">). Vous pouvez gérer la $(document).ready pour y parvenir.

Quelque chose comme (pseudo code)

$(document).ready(function() { 
    var elem = $('#_' + window.location.hash.replace('#', ''));
    if(elem) {
         $.scrollTo(elem.left, elem.top);
    }
});

Answer 2

J'ai fait une certaine amélioration au scénario de Jan Jongboom il ressemble maintenant à ceci:

$(document).ready(function () {
    // replace # with #_ in all links containing #
    $('a[href*=#]').each(function () {
        $(this).attr('href', $(this).attr('href').replace('#', '#_'));
    });

    // scrollTo if #_ found
    hashname = window.location.hash.replace('#_', '');
    // find element to scroll to (<a name=""> or anything with particular id)
    elem = $('a[name="' + hashname + '"],#' + hashname);

    if(elem) {
         $(document).scrollTo(elem, 800);
    }

});

Il change tous les points d'ancrage dans les liens de façon pour les utilisateurs sans javascript le comportement restera intact.

Answer 3

La réponse de Machineghost a été très utile. Le code que je rafistolé prend une URL et param il se transforme en une balise de hachage que le navigateur défile ensuite dès que le DOM est prêt.

L'URL ressemblerait à ceci:

www.mysite.com/hello/world.htm?page=contact

Contact est le nom de l'ID que vous voulez faire défiler jusqu'à

<h1 id="contact">Contact Us</h1>

Voici le code:

// Get any params from the URL
$.extend({
  getUrlVars: function(){
    var vars = [], hash;
    var url = decodeURIComponent(window.location.href);
    var hashes = url.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
      hash = hashes[i].split('=');
      vars.push(hash[0]);
      vars[hash[0]] = hash[1];
    }
    return vars;
  },
  getUrlVar: function(name){
    return $.getUrlVars()[name];
 }
});

$(document).ready(function() {
    // Unhide the main content area
    $('section.centered').fadeIn('slow');

    // Create a var out of the URL param that we can scroll to
    var page = $.getUrlVar('page');
    var scrollElement = '#' + page;

    // Scroll down to the newly specified anchor point
    var destination = $(scrollElement).offset().top;
    $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-75}, 800 );
    return false;
});

J'ai vérifié dans Chrome et FF et cela a fonctionné très bien. Essayez de régler « destination-75 » si la cible de défilement ne va pas à l'endroit exact que vous le souhaitez.

Je ne aurais pu le faire avec les messages ci-dessus, donc merci!

Answer 4

/* scrolling to element */
    var headerHeight = $('#header').height() + $('#header-bottom-cap').height() + 10; //When the header position is fixed
    $('a').click(function(){
        var hashEle = $(this).attr('href').split('#');
        if (hashEle.length > 1) {
            if (hashEle[1] == 'top') {
                $('body, html').animate({
                    scrollTop: 0
                },500);
            } else {
            jQuery('body, html').animate({
                scrollTop: $('#'+ hashEle[1]).offset().top - headerHeight
            },500);
            }
        };
    })
        // find element from url
hashname = window.location.hash.replace('#', '');
elem = $('#' + hashname);
if(hashname.length > 1) {
    if(hashname == 'top') {
    $('body, html').animate({
            scrollTop: 0
        },200); 
    } else {
     $('body, html').animate({
            scrollTop: $(elem).offset().top - headerHeight
        },500);
 }
};
/* END scrolling to element */

ce script doit être en $ (document) .ready (function () {});

Answer 5

Vous pouvez toujours utiliser ScrollTo. Vous voulez rendre la page sans points d'ancrage dans et puis utiliser le JavaScript qui fonctionne lorsque la page est chargée d'obtenir l'ancre de l'URL. Vous pouvez ensuite utiliser ce texte pour faire défiler un ID particulier.

Je ne sais pas comment obtenir l'élément au milieu de la page, mais vous pouvez spécifier un décalage pour le défilement.

Answer 6

Je ne veux pas dire que cela est impossible, mais ... ce sera à tout le moins être assez difficile. Le navigateur (ou au moins tous ceux que je connais) faites défiler jusqu'au point d'ancrage dès qu'une partie des charges de page; Autant que je sache, il n'y a aucun moyen basé sur Javascript pour éviter que (vous auriez besoin d'un plug-in navigateur ou autre).

Cependant, je pense que vous pourriez être en mesure d'utiliser une variante d'un « ne montrent pas la page jusqu'à ce que la page est complètement chargée » script pour obtenir potentiellement le comportement que vous voulez. En d'autres termes, vous:

1. Masquer (un DIV qui enveloppe votre page entière, et mettre un "display: none" à savoir le style sur elle.) Tous pré-charge le contenu de votre page

2. Joindre un gestionnaire d'événements "onLoad" à la page qui se cache non votre DIV, et ...

3. Dans ce même gestionnaire d'événements « onLoad », utilisez un mécanisme standard de défilement JS (ie.ScrollTo) pour accéder à l'ancre (je pense que vous serez en mesure de déterminer quel point d'ancrage pour faire défiler par la fenêtre de vérification. emplacement)

En théorie, parce que le navigateur de défilement de la volonté du navigateur entre # 1 et # 2 (et comme il n'y a nulle part pour faire défiler, ce avec le contenu étant caché et tout, je l'imagine tout simplement pas faire quoi que ce soit), le mécanisme de défilement que vous utilisez dans # 3 ne devrait avoir aucune interférence.

Cela étant dit, tout ce qui précède est un complètement Plan non testé; votre kilométrage varient mes. Même si elle fonctionne, ça va être une douleur à mettre en œuvre, de sorte que si vous vraiment veulent ce comportement, il est presque certainement pas la peine.

Answer 7

ce n'est pas possible

modifier

le comportement est tout à fait dans les mains de l'UA.