Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 20.10.2016, 19:09   #1
Наталья Баева
Форумчанин
 
Регистрация: 25.04.2012
Сообщений: 128
По умолчанию Прокрутка страницы по id

создается landing-page
задача: нажимаю в меню страницы ссылку о себе и совершается прокрутка страницы до необходимого раздела, и в меню и в разделе есть одинаковые id, если они совпадают то совершаем переход

PHP код:
<div class="sticky-header">
    <
div class="container-default">
    <
div class="right-side">
      <
class="nav-option" id="osebe">О себе</p>
          <
class="nav-option" id="naviki">Навыки</p>
          <
class="nav-option" id="portfolio">Портфолио</p>
      <
class="nav-option-buy" id="svyz">Обратная связь</p>
    </
div>
    </
div>
  </
div>
  <
div class="sticky-header-spacer"></div>
 
  <
div class="block-2 block-2-gradient" id="osebe">
    <
div class="container-default">
      <
div class="text-left">
        <
h1>О себе</h1>
        <
p></p>
      </
div></div></div
Код:
$('.nav-option').click(function(){
      var id = $(this).text().toLowerCase(); // вместо text(). написать id
      var target = $('#' + id).scrollTop(0);
      $('html, body').animate({
        scrollTop: target.offset().top - 42
      }, 800);
    });
  });
Наталья Баева вне форума Ответить с цитированием
Старый 20.10.2016, 19:11   #2
Alex11223
Старожил
 
Аватар для Alex11223
 
Регистрация: 12.01.2011
Сообщений: 19,500
По умолчанию

JS это не Java.

Цитата:
Сообщение от Наталья Баева Посмотреть сообщение
в меню и в разделе есть одинаковые id
одинаковые id?
не надо делать их одинаковыми.
Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223
ЛС отключены Аларом.
Alex11223 вне форума Ответить с цитированием
Старый 20.10.2016, 19:30   #3
Наталья Баева
Форумчанин
 
Регистрация: 25.04.2012
Сообщений: 128
По умолчанию

Цитата:
Сообщение от Alex11223 Посмотреть сообщение
JS это не Java.
одинаковые id?
не надо делать их одинаковыми.
а что тогда использовать в меню чтобы сравнить значения? ссылки?
в исходном коде используется текст для сравнения, но тогда меню должно быть на английском, а я хочу русское меню

если я использую ссылки, то что прописать в этой строке вместо текста
var id = $(this).text().toLowerCase();

Последний раз редактировалось Alex11223; 20.10.2016 в 20:07.
Наталья Баева вне форума Ответить с цитированием
Старый 20.10.2016, 19:39   #4
Alex11223
Старожил
 
Аватар для Alex11223
 
Регистрация: 12.01.2011
Сообщений: 19,500
По умолчанию

Что угодно. Например классы или любые свои атрибуты (data-my-attr="hello", селектор '[data-my-attr="hello"]'), желательно чтобы имя атрибута начиналось с data- https://developer.mozilla.org/en-US/...ata_attributes
Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223
ЛС отключены Аларом.
Alex11223 вне форума Ответить с цитированием
Старый 20.10.2016, 19:52   #5
Наталья Баева
Форумчанин
 
Регистрация: 25.04.2012
Сообщений: 128
По умолчанию

вот так можно?

Код:
 <p class="nav-option" data-h="osebe">О себе</p>
Наталья Баева вне форума Ответить с цитированием
Старый 20.10.2016, 19:58   #6
Alex11223
Старожил
 
Аватар для Alex11223
 
Регистрация: 12.01.2011
Сообщений: 19,500
По умолчанию

да.
Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223
ЛС отключены Аларом.
Alex11223 вне форума Ответить с цитированием
Старый 20.10.2016, 20:03   #7
Наталья Баева
Форумчанин
 
Регистрация: 25.04.2012
Сообщений: 128
По умолчанию

var id = $(this).text().toLowerCase(); ---- а здесь что писать?
var id = $(this).data-h.toLowerCase(); ---- так не работает
Наталья Баева вне форума Ответить с цитированием
Старый 20.10.2016, 20:05   #8
Наталья Баева
Форумчанин
 
Регистрация: 25.04.2012
Сообщений: 128
По умолчанию

почему здесь data-h выделяется синим как и класс, а у меня в коде черным (в notepad++) так должно быть?
Наталья Баева вне форума Ответить с цитированием
Старый 20.10.2016, 20:05   #9
Alex11223
Старожил
 
Аватар для Alex11223
 
Регистрация: 12.01.2011
Сообщений: 19,500
По умолчанию

.attr('data-h') http://api.jquery.com/attr/
Ушел с форума, https://www.programmersforum.rocks, alex.pantec@gmail.com, https://github.com/AlexP11223
ЛС отключены Аларом.
Alex11223 вне форума Ответить с цитированием
Старый 20.10.2016, 20:18   #10
Наталья Баева
Форумчанин
 
Регистрация: 25.04.2012
Сообщений: 128
По умолчанию

Спасибо, все работает.
Наталья Баева вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц



Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Прокрутка страницы Александр3 JavaScript, Ajax 1 30.09.2016 11:24
Прокрутка к элементу при загрузке страницы Viconte JavaScript, Ajax 3 26.07.2014 06:01
Вставка особой нумерации на нечетные страницы с разрывом страницы akokin Microsoft Office Word 13 20.10.2009 15:23
Динамическое изменение URL страницы в JavaScript без перезагрузки страницы ilusha JavaScript, Ajax 7 25.02.2009 09:59
Как сделать разрыв страницы печати по условию и узнать номер страницы Leanna Microsoft Office Excel 2 21.01.2008 06:59