плавная прокрутка не работает в Mozzilla - JavaScript, Ajax - Страница 2

Zugelman · 10.10.2014, 10:07

Цитата:

Сообщение от Arigato

У меня всегда выделена Главная (хоть кликать, хоть скролить). В Опере аналогично. В Сафаре и Хроме пункты подсвечивает.

Можно ли это как-то исправить? Что бы на всех работало

Zugelman · 10.10.2014, 11:30

В общем решил я эту проблему и без помощи. Немного дольше потребовалось времени конечно. Но что тут сказать. Не хотят тут помогать(( Но я не буду утаивать готовый вариант, рабочий во всех браузерах(кроме ie <9) Хотя можно и условие поставить для ie отдельно но это уже вы сами, кому надо. В общем как и предполагалось вся проблема заключалась как я и подозревал в строчке

Код:

var num = $("body").scrollTop();

Все дело в том, что это видимо из за Jquery плагина, его недоработку наверно. Не стал искать удостоверяться но вот как должно быть:

Код:

var num = window.pageYOffset;

Это хоть и javascript а не фреймворк, но все же свойство pageYOffset поддерживается только современными браузерами, кроме IE<9. Для IE<9 работать команда будет

Код:

var num = document.documentElement.scrollTop;

Так что смотрите готовый пример, и спасибо что зашли.
http://jsfiddle.net/qfzhm073/10/

uberchel · 13.10.2014, 02:49

Надо, изначально подходить к реализации грамотно.
Не нужно танцев с бубном, все делается просто, при клике на тег li, мы берем данные из атрибута rel(это будет названия id блока), далее все просто, вычисляем его расстояние до хедера и скроллим до него. Кроссбраузерно!

Код HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Скроллинг</title>
<script src="jquery.min.js"></script>

<style>
#wrap{
  margin: 0 auto; 
  width: 500px; 
  height: 3000px; 
  outline: 1px solid #cc0000;
    
}

.container {
 clear:both;
 overflow:hidden;
}

.container div {
   background:#DDDFFF;
   margin:5px auto;
   border:1px solid #CCC;
   height:300px;
}

.container div:nth-child(2n) {
   background:#DDD;
   margin:5px auto;
   border:1px solid #CCC;
}

#nav{
 margin: 0 auto;   
    
}
#nav li{
  text-decoration: none;
  float: left; 
  margin-left: 20px;
  cursor:pointer;
}
</style>
<script style="text/javascript">
$(document).ready(function(){
    $("#nav li").click(function() {
       $(this).parents()
         .find('li.active')
         .removeClass('active');
       $(this).addClass('active');
       $('html,body').animate({scrollTop: $('#'+$(this).attr('rel')).offset().top}, 400);
    });
});
</script>


<body>
<div id="wrap">
                  <ul  id="nav">
     	            <li rel="first" class="active">Главная</li>
                	<li rel="second">Предложение</li>
                	<li rel="theird">Качество</li>
                	<li rel="foure">Клиенты</li>
                	<li rel="five">Доставка</li>
                  </ul>
                  <div class="container">
                  <div id="first">first</div>
                  <div id="second">second</div>
                  <div id="theird">theird</div>
                  <div id="foure">foure</div>
                  <div id="five">five</div>
                  </div>
</div>
</body>
</html>

Zugelman · 27.10.2014, 16:07

Цитата:

Надо, изначально подходить к реализации грамотно.

Ну да.. а что сделать если нужен отступ от блока то вниз то вверх?
на каждый блок вешать +-? получится вообще каша. проще создать массив с координатами и использовать.

Zugelman · 27.10.2014, 16:10

и запись короче

10.10.2014, 11:30	#12
Zugelman Пользователь Регистрация: 08.04.2009 Сообщений: 50	В общем решил я эту проблему и без помощи. Немного дольше потребовалось времени конечно. Но что тут сказать. Не хотят тут помогать(( Но я не буду утаивать готовый вариант, рабочий во всех браузерах(кроме ie <9) Хотя можно и условие поставить для ie отдельно но это уже вы сами, кому надо. В общем как и предполагалось вся проблема заключалась как я и подозревал в строчке Код: `var num = $("body").scrollTop();` Все дело в том, что это видимо из за Jquery плагина, его недоработку наверно. Не стал искать удостоверяться но вот как должно быть: Код: `var num = window.pageYOffset;` Это хоть и javascript а не фреймворк, но все же свойство pageYOffset поддерживается только современными браузерами, кроме IE<9. Для IE<9 работать команда будет Код: `var num = document.documentElement.scrollTop;` Так что смотрите готовый пример, и спасибо что зашли. http://jsfiddle.net/qfzhm073/10/

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Css стиль не работает на Internet Explorer!	T1pp	HTML и CSS	4	18.03.2016 15:35
не работает javascript в internet explorer 9	warwarwar	JavaScript, Ajax	3	04.03.2013 08:32
Процесс explorer.exe не работает и перегружает ЦП (Windows 7)	Npwas	Операционные системы общие вопросы	2	19.07.2012 19:43
Не работает флеш в Internet Explorer	stepavia	JavaScript, Ajax	0	11.11.2011 01:50
Css меню не работает в Internet Explorer	CoDaJJe	HTML и CSS	0	27.08.2009 21:16

27.10.2014, 16:10	#15
Zugelman Пользователь Регистрация: 08.04.2009 Сообщений: 50	и запись короче