Используйте JavaScript для центрирования привязанного объекта при загрузке страницы - PullRequest
Новая
       11

Используйте JavaScript для центрирования привязанного объекта при загрузке страницы

1 голос
/ 30 сентября 2011

Я хочу перейти к тегу привязки, когда моя страница загружается И объект привязки центрируется в окне.Я использовал простую функцию для перехода к привязке при загрузке страницы: 

<body onload="goToAnchor();">

<script type="text/javascript">

function goToAnchor() {
window.location = "#center";
}

</script>

Но для того, чтобы привязать объект привязки, мне нужно как-то сместить местоположение окна.Для другой функции я использовал что-то вроде этого для достижения соответствующего смещения (ширина объекта - фиксированная 1500px): 

var $offset_target = (1500 - $(window).width())/2;

Это успешно гарантировало, что каждый раз, когда я прыгал на якорь, объект былпо центру в окне просмотра, независимо от размера окна.

Есть идеи?

Спасибо !!

ОБНОВЛЕНИЕ / ОТВЕТ

Итак, я использовал два ответа ниже, чтобы прийтис этим: 

function goToAnchor() {
document.body.scrollLeft = document.documentElement.scrollLeft =       
document.getElementById('center').offsetLeft-
(Math.ceil((- 1500 + $(window).width()) / 2));

}

Возможно, это не самое элегантное решение, но оно выполняет свою работу!Большое спасибо за ваши ответы!

Если у кого-то есть лучший способ сделать это, пожалуйста, сообщите нам!

Ответы [ 3 ]

0 голосов
/ 30 сентября 2011

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

$(window).scrollLeft(Math.ceil((1500 - $(window).width()) / 2));
0 голосов
/ 30 сентября 2011

Вам вообще не нужен скрипт, используйте CSS: 

.centered {
  text-align: left;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
}

IE должен быть в стандартном режиме, чтобы это работало (что просто означает использование действительного DOCTYPE).Если для обоих полей установлено значение auto, они имеют одинаковое значение.

Вот полный пример, в котором центрируется элемент body: 

<style type="text/css">
.centered {
  text-align: left;
  width: 500px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid blue;
}
.panel1 {border: 1px solid red;height: 200px}
.panel2 {border: 1px solid green;height: 200px}
</style>

<body class="centered">
  <div class="panel1">
    <div class="panel2"></div>
  </div>
  <div class="panel1">
    <div class="panel2"></div>
  </div>
</body>
0 голосов
/ 30 сентября 2011

без jQuery: 

function goToAnchor() {
    document.body.scrollTop = document.documentElement.scrollTop =
        document.getElementById('center').offsetTop-window.innerHeight/2;
}

Это будет нормально работать в большинстве случаев. Если #center находится в элементе с position, отличным от static, то для вычисления правильного смещения потребуется немного больше, но в противном случае он будет работать как есть.

...