Сосредоточьтесь на закрепленном изображении после прыжка?

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

  •  11-09-2019
  •  | 
  •  

Вопрос

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

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

Роберт К.

Это было полезно?

Решение

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

Вы могли бы исправить это поведение с помощью 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 элементы смещаются и прокручиваются по центру.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top