Centro immagine ancorata dopo salto?

StackOverflow https://stackoverflow.com/questions/1830711

  •  11-09-2019
  •  | 
  •  

Domanda

Quando faccio un salto a un tag di ancoraggio in su una vasta (4000px) pagina, l'immagine viene ancorata in senso orizzontale allineato a destra. Come posso convincerlo per allineare al centro? Ho provato diverse cose, ma nessuno sembra funzionare. Dato che io sono di nuovo qui non mi è permesso di pubblicare il codice, in modo spero di essere stato abbastanza chiaro.

Grazie per il vostro aiuto,

Robert C.

È stato utile?

Soluzione

Il problema nasce dal fatto che il browser farà la minor quantità di scrolling necessaria per portare l'elemento ancorato in vista. Così, se è a destra dell'area visibile, quando il tag di ancoraggio viene cliccato, sarà semplicemente scorrere abbastanza lontano per il diritto di rivelare l'intero elemento.

Si potrebbe risolvere questo comportamento con javascript se questa è un'opzione. Non sarà in grado di centrare sul #anchor fare clic dritto CSS.

Ecco una "soluzione" utilizzando jQuery. Ho "soluzione" tra virgolette perché potrebbe introdurre più problemi di quanti si desidera. Per esempio, senza ulteriori JS il pulsante Indietro non funziona per andare al link precedente. Ma questo non centrare l'elemento dato il vostro codice di esempio.

Basta aggiungere questo alla pagina si è collegato sopra prima del tag di chiusura <head>: 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  
<script type="text/javascript">
$(function(){
   $("a[href^=#]").click(function(e){
       var id      = $(this).attr('href').substr(1),
           $target = $('*[name=' + id + '] img'),
           $window = $(window),
           offset  = $target.offset();

       var left = offset.left - ($window.width() / 2) + ($target.width() / 2 );
       var top  = offset.top  - ($window.height() / 2) + ($target.height() / 2);


       $('html,body').scrollTop(top).scrollLeft( left);

       e.preventDefault(); // Keep the browser from trying
   });  
});
</script>

Si troverà tutti i tag a con collegamenti interni (inizia href con #). Poi si trova il bersaglio che ha quel nome, e afferra il tag bambino img. Quindi, ottiene il dimensioni dell'elemento img e l'elemento window. Fa un po 'di matematica con gli elementi img offset, e pergamene esso con il centro.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top