Center am verankerten Bild nach Sprung?

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

  •  11-09-2019
  •  | 
  •  

Frage

Wenn ich zu einem Anker-Tag springen auf einer breiten (4000px) Seite wird das verankerte Bild horizontal nach rechts ausgerichtet. Wie kann ich es in die Mitte auszurichten? Ich habe einige Dinge ausprobiert, aber keiner scheint zu arbeiten. Da ich neu bin hier bin ich nicht erlaubt, den Code zu schreiben, so dass ich hoffe, ich war klar genug.

Danke für Ihre Hilfe,

Robert C.

War es hilfreich?

Lösung

Das Problem entsteht, weil der Browser benötigt, um die geringste Menge an tun Scrollen des verankertes Element in den Blick zu bringen. Wenn es also nach rechts ab von dem sichtbaren Bereich ist, wenn der Anker-Tag angeklickt wird, wird es einfach scrollen weit genug nach rechts das gesamten Elemente zu zeigen.

Sie können dieses Verhalten mit Javascript beheben, wenn das eine Option ist. Sie werden es nicht mit geradem CSS auf #anchor klicken Lage sein, zu zentrieren.

Hier ist eine „Lösung“ mit jQuery. Ich habe „Lösung“ in Anführungszeichen, weil es möglicherweise mehr Probleme vorstellen, als Sie wollen. Zum Beispiel ohne weitere JS wird die Zurück-Taste nicht auf die vorherige Verknüpfung gehen arbeiten. Aber das tut Zentrum das Element gegeben Ihr Beispielcode.

Fügen Sie einfach diese auf die Seite, die Sie vor dem Schließen <head> Tag verknüpft oben: 

<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>

Es werden alle a Tags mit internen Links (href beginnt mit #) finden. Dann findet es das Ziel, die diesen Namen hat, und packt das Kind img Tag. Dann wird es, die Abmessungen des img Element und dem window Element. Gibt es etwas Mathematik mit den img Elementen versetzt, und blättert sie in der Mitte.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top