Центр на закрепленном изображении после прыжка? - PullRequest
Новая
       46

Центр на закрепленном изображении после прыжка?

1 голос
/ 02 декабря 2009

При переходе к тегу привязки на широкой странице (4000 пикселей) привязанное изображение выравнивается по горизонтали вправо. Как я могу заставить это выровнять к центру? Я пробовал несколько вещей, но ни одна из них не работает. Так как я здесь новичок, мне не разрешено публиковать код, поэтому я надеюсь, что я достаточно ясен.

Спасибо за вашу помощь,

Роберт С.

1 Ответ

0 голосов
/ 02 декабря 2009

Проблема возникает из-за того, что браузер выполняет наименьшее количество прокрутки, необходимой для отображения привязанного элемента. Таким образом, если он находится справа от видимой области, при щелчке тега привязки он просто прокрутится достаточно далеко вправо, чтобы показать весь элемент.

Вы можете исправить это поведение с помощью JavaScript, если это вариант. Вы не сможете центрировать его на #anchor клике с прямым CSS.

Вот «решение» с использованием jQuery. У меня есть «решение» в кавычках, потому что оно может создать больше проблем, чем вы хотите. Например, без дополнительной JS кнопка возврата не будет работать, чтобы перейти к предыдущей ссылке. Но это центрирует элемент, учитывая ваш пример кода.

Просто добавьте это на страницу, на которую вы ссылались выше, перед закрывающим тегом <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>

Он найдет все теги a с внутренними ссылками (href начинается с #). Затем он находит цель с таким именем и захватывает дочерний тег img. Затем он получает размеры элемента img и элемента window. Делает некоторые вычисления со смещением элементов img и прокручивает их в центр.

...