|
|
Регистрация Восстановить пароль |
Повторная активизация e-mail |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
|
Опции темы | Поиск в этой теме |
10.10.2014, 10:07 | #11 |
Пользователь
Регистрация: 08.04.2009
Сообщений: 50
|
|
10.10.2014, 11:30 | #12 |
Пользователь
Регистрация: 08.04.2009
Сообщений: 50
|
В общем решил я эту проблему и без помощи. Немного дольше потребовалось времени конечно. Но что тут сказать. Не хотят тут помогать(( Но я не буду утаивать готовый вариант, рабочий во всех браузерах(кроме ie <9) Хотя можно и условие поставить для ie отдельно но это уже вы сами, кому надо. В общем как и предполагалось вся проблема заключалась как я и подозревал в строчке
Код:
Код:
Код:
http://jsfiddle.net/qfzhm073/10/ |
13.10.2014, 02:49 | #13 |
Участник клуба
Регистрация: 19.01.2009
Сообщений: 1,453
|
Надо, изначально подходить к реализации грамотно.
Не нужно танцев с бубном, все делается просто, при клике на тег 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> |
27.10.2014, 16:07 | #14 | |
Пользователь
Регистрация: 08.04.2009
Сообщений: 50
|
Цитата:
на каждый блок вешать +-? получится вообще каша. проще создать массив с координатами и использовать. |
|
27.10.2014, 16:10 | #15 |
Пользователь
Регистрация: 08.04.2009
Сообщений: 50
|
и запись короче
|
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
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 |