Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.11.2014, 18:28
Интересующийся
Отправить личное сообщение для rebroff Посмотреть профиль Найти все сообщения от rebroff
 
Регистрация: 20.10.2010
Сообщений: 14

Как реализовать прокрутку до элемента с помощью scrollTop при body {zoom:90%} ?
Здравствуйте.
Сайт http://marvelestate.ru.
На сайте реализована прокрутка до блока с ID по клику на пункт меню.

$('.main_menu a').click(function () {
     var elementClick = $(this).attr('href');
     var destination = $(elementClick).offset().top;

     $('body').animate({ scrollTop: destination  }, 1000);

     return false;
});



Все работает, все ок. Но по прошествии некоторого времени заказчику захотелось изменить масштаб задав

Код:
body {
  zoom: 90%;
}

Теперь соответственно скролл работает некорректно. Как привязать скролл к масштабированию?

Благодарю.

Последний раз редактировалось rebroff, 17.11.2014 в 18:45.
Ответить с цитированием
  #2 (permalink)  
Старый 17.11.2014, 19:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,335

rebroff,
в чём проблема то ? добавить поправку на zoom
Ответить с цитированием
  #3 (permalink)  
Старый 17.11.2014, 19:15
Интересующийся
Отправить личное сообщение для rebroff Посмотреть профиль Найти все сообщения от rebroff
 
Регистрация: 20.10.2010
Сообщений: 14

рони,
В этом то и проблема. Не знаю, как. Пробовал destination*0.9. Не то.
Ответить с цитированием
  #4 (permalink)  
Старый 17.11.2014, 19:19
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,335

Сообщение от rebroff
Не то.
почему не то? zoom лучше задать числом а не процентами меньше мороки с переводом в число
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 body {
  zoom: 0.9;
}
#first{
  margin-top: 1000px;
}
.info_show{
  height: 1000px;
  display: block;
}

  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
      $('.main_menu a').click(function () {

     var destination = $(this.hash).offset().top,
     zoom = +$('body').css('zoom') || 1;
     $('body, html').animate({ scrollTop: destination * zoom }, 1000);

     return false;
});

});
  </script>
</head>

<body>
<div class='main_menu'><a href="#first">first</a>

</div>



<div id='first'>
<span class='info'>Информация3</span>
<div class='main'>
<span class='info_show '>текст3</span>
</div>
</div>

</body>

</html>

Последний раз редактировалось рони, 17.11.2014 в 19:22.
Ответить с цитированием
  #5 (permalink)  
Старый 17.11.2014, 19:39
Интересующийся
Отправить личное сообщение для rebroff Посмотреть профиль Найти все сообщения от rebroff
 
Регистрация: 20.10.2010
Сообщений: 14

рони,
не получается. Причем бывает, что два раза подряд кликаю по одному и тому же пункту в меню и экран прокручивается на разные расстояния. Убираю zoom - все ок.
Вот сайт:
http://marvelestate.ru
Ответить с цитированием
  #6 (permalink)  
Старый 17.11.2014, 19:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,335

rebroff,
скопируйте код ещё раз
Ответить с цитированием
  #7 (permalink)  
Старый 17.11.2014, 23:18
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от rebroff
Но по прошествии некоторого времени заказчику захотелось изменить масштаб задав zoom: 90%;
Скажи ему что он долбоеб
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #8 (permalink)  
Старый 18.11.2014, 12:19
Интересующийся
Отправить личное сообщение для rebroff Посмотреть профиль Найти все сообщения от rebroff
 
Регистрация: 20.10.2010
Сообщений: 14

Сообщение от рони Посмотреть сообщение
rebroff,
скопируйте код ещё раз
Скопировал. В первый раз "+" паропустил перед $('body').
Все равно не работает.
Ответить с цитированием
  #9 (permalink)  
Старый 18.11.2014, 12:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 26,335

rebroff,
а нафига вместо
<style type="text/css">
    body {
  zoom: 0.9;
}
    </style>


<body style="zoom:0.9; /*transform: scaleX(0.9);*/">
Ответить с цитированием
  #10 (permalink)  
Старый 18.11.2014, 13:07
Интересующийся
Отправить личное сообщение для rebroff Посмотреть профиль Найти все сообщения от rebroff
 
Регистрация: 20.10.2010
Сообщений: 14

рони,
да это заказчик (или его айтишнеги) так указал зум
перенес в файл стилей
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать умную прокрутку на сайте? armidow Элементы интерфейса 0 20.04.2014 02:45
Как реализовать отправку содержимого из iframe нажатием комбинации клавиш ctrl+enter Naizer Общие вопросы Javascript 4 27.11.2013 15:39
Как сохранить обработчики элемента, при изменения положения элемента в dom-дереве ? Danxil Events/DOM/Window 5 08.11.2013 21:33
Как сделать плавную прокрутку текста? Чтобы небыло попиксельных скачков ant.kritsky Общие вопросы Javascript 11 01.04.2013 03:49
Как правильно подавить событие при подключении своего обработчика? Маэстро Firefox/Mozilla 2 03.09.2011 10:46