Перейти к содержимому


Как Добавить Якорь На Другую Страницу.


  • Авторизуйтесь для ответа в теме
Сообщений в теме: 20

#1 Dazzlin

Dazzlin

    Пользователь

  • Пользователи
  • PipPip
  • 22 сообщений
  • ГородСанкт-Петербург

Отправлено 27 Май 2013 - 20:25

Здравствуйте! Не нашла подобного вопроса (или плохо искала? :)), поэтому создала новую тему и прошу помочь.  Думаю, что она многим пригодится.

У меня над меню есть три блока. В них хочу сделать ссылки на подробные описания (на созданные страницы). Мне необходимо, чтобы при клике на ссылку в одном из блоков, появлялась другая страница с описанием на определенном месте т.е. якорь. Такие же якоря мне необходимо и для пунктов меню. Потому что верхние блоки занимают у меня очень много место. Неудобно постоянно скролить. Что и отпугнет покупателя...
Что мне нужно сделать?

Прикрепленные изображения

  • якорь_cr.jpg


#2 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 28 Май 2013 - 05:29

Используйте якоря. Для реализации якоря необходимо ссылке задать идентификатор якоря, а блоку просто идентификатор. Например

<a href="адрес страницы с описанием#идентификатор">Подробнее</a>
<span id="идентификатор"></span>

или детально

<a href="http://domain.ru/page/index#block_desc">Подробнее</a>
<span id="block_desc">Описание</span>


#3 Dazzlin

Dazzlin

    Пользователь

  • Пользователи
  • PipPip
  • 22 сообщений
  • ГородСанкт-Петербург

Отправлено 28 Май 2013 - 20:59

Просмотр сообщенияVaccina (28 Май 2013 - 05:29) писал:

Используйте якоря. Для реализации якоря необходимо ссылке задать идентификатор якоря, а блоку просто идентификатор. Например

<a href="адрес страницы с описанием#идентификатор">Подробнее</a>
<span id="идентификатор"></span>

или детально

<a href="http://domain.ru/page/index#block_desc">Подробнее</a>
<span id="block_desc">Описание</span>

А как его прописывать на созданной странице? Может я не вижу html редактор, а он есть?

#4 Сake

Сake

    Активный участник

  • Модератоpы
  • 5 979 сообщений

Отправлено 29 Май 2013 - 00:55

На созданной странице вы можете вставить якорь как через исходный код - нажав на кнопку "Источник", так и с помощью 2х кнопок на панели "Создать Div-контейнер", "Вставить / редактировать якорь".

Имя якоря: это идентификатор div контейнера.

#5 Dazzlin

Dazzlin

    Пользователь

  • Пользователи
  • PipPip
  • 22 сообщений
  • ГородСанкт-Петербург

Отправлено 30 Май 2013 - 11:24

Просмотр сообщенияСake (29 Май 2013 - 00:55) писал:

На созданной странице вы можете вставить якорь как через исходный код - нажав на кнопку "Источник", так и с помощью 2х кнопок на панели "Создать Div-контейнер", "Вставить / редактировать якорь".

Имя якоря: это идентификатор div контейнера.

Разобралась! Спасибо большущее! :)

#6 Dazzlin

Dazzlin

    Пользователь

  • Пользователи
  • PipPip
  • 22 сообщений
  • ГородСанкт-Петербург

Отправлено 09 Июнь 2013 - 15:42

Просмотр сообщенияСake (29 Май 2013 - 00:55) писал:

На созданной странице вы можете вставить якорь как через исходный код - нажав на кнопку "Источник", так и с помощью 2х кнопок на панели "Создать Div-контейнер", "Вставить / редактировать якорь".

Имя якоря: это идентификатор div контейнера.

Теперь очередной вопрос про якорь. Как его установить на пунктах верхнего меню и в меню каталога?

#7 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 10 Июнь 2013 - 06:25

Просмотр сообщенияDazzlin (09 Июнь 2013 - 15:42) писал:

Теперь очередной вопрос про якорь. Как его установить на пунктах верхнего меню и в меню каталога?

Можете объяснить подробнее, что вы хотите сделать? Якорем называется закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке. Якоря удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу. Подробнее здесь - http://htmlbook.ru/samhtml/yakorya

#8 Dazzlin

Dazzlin

    Пользователь

  • Пользователи
  • PipPip
  • 22 сообщений
  • ГородСанкт-Петербург

Отправлено 11 Июнь 2013 - 08:30

Просмотр сообщенияmiyako (10 Июнь 2013 - 06:25) писал:

Можете объяснить подробнее, что вы хотите сделать? Якорем называется закладка с уникальным именем на определенном месте веб-страницы, предназначенная для создания перехода к ней по ссылке. Якоря удобно применять в документах большого объема, чтобы можно было быстро переходить к нужному разделу. Подробнее здесь - http://htmlbook.ru/samhtml/yakorya

Вот мой первый вопрос. Из него вытекает этот.

Просмотр сообщенияDazzlin (27 Май 2013 - 20:25) писал:

У меня над меню есть три блока. В них хочу сделать ссылки на подробные описания (на созданные страницы). Мне необходимо, чтобы при клике на ссылку в одном из блоков, появлялась другая страница с описанием на определенном месте т.е. якорь. Такие же якоря мне необходимо и для пунктов меню. Потому что верхние блоки занимают у меня очень много место. Неудобно постоянно скролить. Что и отпугнет покупателя...
Что мне нужно сделать?

Я разобралась, как сделать якорь с блоков на созданные страницы. Теперь мне необходимо, чтобы такой же якорь был на пунктах меню. Т.е. я, например, нажимаю КАТАЛОГ (верхнее меню) или ТОВАР 1(боковое меню) и у меня переходит на каталог или на товар, а не на начало страницы(мои три блока). Постоянно скролить не серьезно как-то.

#9 Koderhan

Koderhan

    Активный участник

  • Модератоpы
  • 6 227 сообщений

Отправлено 11 Июнь 2013 - 08:45

Просмотр сообщенияDazzlin (11 Июнь 2013 - 08:30) писал:

Вот мой первый вопрос. Из него вытекает этот.



Я разобралась, как сделать якорь с блоков на созданные страницы. Теперь мне необходимо, чтобы такой же якорь был на пунктах меню. Т.е. я, например, нажимаю КАТАЛОГ (верхнее меню) или ТОВАР 1(боковое меню) и у меня переходит на каталог или на товар, а не на начало страницы(мои три блока). Постоянно скролить не серьезно как-то.
Для того чтобы ссылка с каталога сразу скролила на область страницы с товарами.
В файле "HTML".
Код:
<li class="{% IF catalog.LEVEL>0%}incat{% ENDIF %} {% IF catalog.CURRENT %}fnt12b{% ENDIF %}"><a href="{catalog.URL}" {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("30")}px"{% ENDIF %}>{catalog.NAME}</a></li>
Заменить:
<li class="{% IF catalog.LEVEL>0%}incat{% ENDIF %} {% IF catalog.CURRENT %}fnt12b{% ENDIF %}"><a href="{catalog.URL}#content" {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("30")}px"{% ENDIF %}>{catalog.NAME}</a></li>
Тут мы добавили в конец каждого адреса #content

#10 Dazzlin

Dazzlin

    Пользователь

  • Пользователи
  • PipPip
  • 22 сообщений
  • ГородСанкт-Петербург

Отправлено 13 Июнь 2013 - 07:59

Просмотр сообщенияKoderhan (11 Июнь 2013 - 08:45) писал:

Для того чтобы ссылка с каталога сразу скролила на область страницы с товарами.
В файле "HTML".
Код:
<li class="{% IF catalog.LEVEL>0%}incat{% ENDIF %} {% IF catalog.CURRENT %}fnt12b{% ENDIF %}"><a href="{catalog.URL}" {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("30")}px"{% ENDIF %}>{catalog.NAME}</a></li>
Заменить:
<li class="{% IF catalog.LEVEL>0%}incat{% ENDIF %} {% IF catalog.CURRENT %}fnt12b{% ENDIF %}"><a href="{catalog.URL}#content" {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("30")}px"{% ENDIF %}>{catalog.NAME}</a></li>
Тут мы добавили в конец каждого адреса #content

Здорово! Спасибо большое!

#11 Dazzlin

Dazzlin

    Пользователь

  • Пользователи
  • PipPip
  • 22 сообщений
  • ГородСанкт-Петербург

Отправлено 15 Июнь 2013 - 20:58

Просмотр сообщенияKoderhan (11 Июнь 2013 - 08:45) писал:

Для того чтобы ссылка с каталога сразу скролила на область страницы с товарами.
В файле "HTML".
Код:
<li class="{% IF catalog.LEVEL>0%}incat{% ENDIF %} {% IF catalog.CURRENT %}fnt12b{% ENDIF %}"><a href="{catalog.URL}" {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("30")}px"{% ENDIF %}>{catalog.NAME}</a></li>
Заменить:
<li class="{% IF catalog.LEVEL>0%}incat{% ENDIF %} {% IF catalog.CURRENT %}fnt12b{% ENDIF %}"><a href="{catalog.URL}#content" {% IF catalog.LEVEL>0%}style="padding-left:{catalog.LEVEL | multiply("30")}px"{% ENDIF %}>{catalog.NAME}</a></li>
Тут мы добавили в конец каждого адреса #content

И опять по якорям. Нажимаю "подробнее" на странице каталога товаров - отправляет на моих три блока в начале страницы магазина. Куда именно нужно ещё вставить
#content?

#12 Koderhan

Koderhan

    Активный участник

  • Модератоpы
  • 6 227 сообщений

Отправлено 16 Июнь 2013 - 13:36

Просмотр сообщенияDazzlin (15 Июнь 2013 - 20:58) писал:

И опять по якорям. Нажимаю "подробнее" на странице каталога товаров - отправляет на моих три блока в начале страницы магазина. Куда именно нужно ещё вставить
#content?
В файле "Товары".
Код:
<a href="{goods.URL}" class="whtgray" title="Подробнее о товаре &laquo;{goods.NAME}&raquo;">Подробнее</a>
На код:
<a href="{goods.URL}#content" class="whtgray" title="Подробнее о товаре &laquo;{goods.NAME}&raquo;">Подробнее</a>

И для таблицы:
Код:
<a href="{goods.URL}" class="whtgreen" title="Перейти на страницу &laquo;{goods.NAME}&raquo;">Подробнее</a>
Заменить:
<a href="{goods.URL}#content" class="whtgreen" title="Перейти на страницу &laquo;{goods.NAME}&raquo;">Подробнее</a>

А еще для категорий в режиме каталога.
Код:
{% FOR nested_categories_list %}
			 <td>
			 <div class="tabproduct">
				 <div class="title fnt12b txtalgncnt">
				 <a href="{nested_categories_list.URL}" title="Перейти к категории &laquo;{nested_categories_list.NAME}&raquo;">{nested_categories_list.NAME}</a>
				 </div>
				 <div class="img txtalgncnt">
				 <a href="{nested_categories_list.URL}" title="Перейти на страницу &laquo;{nested_categories_list.NAME}&raquo;"><img {% IF nested_categories_list.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-small.png" width="130"{% ELSE %}src="{nested_categories_list.IMAGE_MEDIUM}"{% ENDIF %} alt="{nested_categories_list.NAME}" /></a>
				 </div>
				 <div class="buttons txtalgncnt">
				 <a href="{nested_categories_list.URL}" class="whtgreen" title="Перейти к категории &laquo;{nested_categories_list.NAME}&raquo;">Перейти в категорию</a>
				 </div>
			 </div>
			 </td>
			 {% IFNOT nested_categories_list.last %}{nested_categories_list.index | is_divided("3","</tr><tr>","")}{% ENDIF %}
		 {% ENDFOR %}

Заменить:
{% FOR nested_categories_list %}
			 <td>
			 <div class="tabproduct">
				 <div class="title fnt12b txtalgncnt">
				 <a href="{nested_categories_list.URL}#content" title="Перейти к категории &laquo;{nested_categories_list.NAME}&raquo;">{nested_categories_list.NAME}</a>
				 </div>
				 <div class="img txtalgncnt">
				 <a href="{nested_categories_list.URL}#content" title="Перейти на страницу &laquo;{nested_categories_list.NAME}&raquo;"><img {% IF nested_categories_list.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-small.png" width="130"{% ELSE %}src="{nested_categories_list.IMAGE_MEDIUM}"{% ENDIF %} alt="{nested_categories_list.NAME}" /></a>
				 </div>
				 <div class="buttons txtalgncnt">
				 <a href="{nested_categories_list.URL}#content" class="whtgreen" title="Перейти к категории &laquo;{nested_categories_list.NAME}&raquo;">Перейти в категорию</a>
				 </div>
			 </div>
			 </td>
			 {% IFNOT nested_categories_list.last %}{nested_categories_list.index | is_divided("3","</tr><tr>","")}{% ENDIF %}
		 {% ENDFOR %}


#13 Dazzlin

Dazzlin

    Пользователь

  • Пользователи
  • PipPip
  • 22 сообщений
  • ГородСанкт-Петербург

Отправлено 16 Июнь 2013 - 20:15

Просмотр сообщенияKoderhan (16 Июнь 2013 - 13:36) писал:

В файле "Товары".
Код:
<a href="{goods.URL}" class="whtgray" title="Подробнее о товаре &laquo;{goods.NAME}&raquo;">Подробнее</a>
На код:
<a href="{goods.URL}#content" class="whtgray" title="Подробнее о товаре &laquo;{goods.NAME}&raquo;">Подробнее</a>

И для таблицы:
Код:
<a href="{goods.URL}" class="whtgreen" title="Перейти на страницу &laquo;{goods.NAME}&raquo;">Подробнее</a>
Заменить:
<a href="{goods.URL}#content" class="whtgreen" title="Перейти на страницу &laquo;{goods.NAME}&raquo;">Подробнее</a>

А еще для категорий в режиме каталога.
Код:
{% FOR nested_categories_list %}
			 <td>
			 <div class="tabproduct">
				 <div class="title fnt12b txtalgncnt">
				 <a href="{nested_categories_list.URL}" title="Перейти к категории &laquo;{nested_categories_list.NAME}&raquo;">{nested_categories_list.NAME}</a>
				 </div>
				 <div class="img txtalgncnt">
				 <a href="{nested_categories_list.URL}" title="Перейти на страницу &laquo;{nested_categories_list.NAME}&raquo;"><img {% IF nested_categories_list.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-small.png" width="130"{% ELSE %}src="{nested_categories_list.IMAGE_MEDIUM}"{% ENDIF %} alt="{nested_categories_list.NAME}" /></a>
				 </div>
				 <div class="buttons txtalgncnt">
				 <a href="{nested_categories_list.URL}" class="whtgreen" title="Перейти к категории &laquo;{nested_categories_list.NAME}&raquo;">Перейти в категорию</a>
				 </div>
			 </div>
			 </td>
			 {% IFNOT nested_categories_list.last %}{nested_categories_list.index | is_divided("3","</tr><tr>","")}{% ENDIF %}
		 {% ENDFOR %}

Заменить:
{% FOR nested_categories_list %}
			 <td>
			 <div class="tabproduct">
				 <div class="title fnt12b txtalgncnt">
				 <a href="{nested_categories_list.URL}#content" title="Перейти к категории &laquo;{nested_categories_list.NAME}&raquo;">{nested_categories_list.NAME}</a>
				 </div>
				 <div class="img txtalgncnt">
				 <a href="{nested_categories_list.URL}#content" title="Перейти на страницу &laquo;{nested_categories_list.NAME}&raquo;"><img {% IF nested_categories_list.IMAGE_EMPTY %}src="{ASSETS_IMAGES_PATH}no-photo-small.png" width="130"{% ELSE %}src="{nested_categories_list.IMAGE_MEDIUM}"{% ENDIF %} alt="{nested_categories_list.NAME}" /></a>
				 </div>
				 <div class="buttons txtalgncnt">
				 <a href="{nested_categories_list.URL}#content" class="whtgreen" title="Перейти к категории &laquo;{nested_categories_list.NAME}&raquo;">Перейти в категорию</a>
				 </div>
			 </div>
			 </td>
			 {% IFNOT nested_categories_list.last %}{nested_categories_list.index | is_divided("3","</tr><tr>","")}{% ENDIF %}
		 {% ENDFOR %}
не помогло

#14 Koderhan

Koderhan

    Активный участник

  • Модератоpы
  • 6 227 сообщений

Отправлено 17 Июнь 2013 - 13:20

Просмотр сообщенияDazzlin (16 Июнь 2013 - 20:15) писал:

не помогло

Должно было сработать. На вашем сайте я не нашел у кнопки подробно в каталоге.

Прикрепленные изображения

  • ScreenShot 682.png


#15 sotil

sotil

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 413 сообщений
  • ГородЕкатеринбург

Отправлено 06 Август 2013 - 10:41

Просмотр сообщенияVaccina (28 Май 2013 - 05:29) писал:

Используйте якоря. Для реализации якоря необходимо ссылке задать идентификатор якоря, а блоку просто идентификатор. Например

<a href="адрес страницы с описанием#идентификатор">Подробнее</a>
<span id="идентификатор"></span>

или детально

<a href="http://domain.ru/page/index#block_desc">Подробнее</a>
<span id="block_desc">Описание</span>
Не могу разобраться!
Со страницы ТОВАР ссылка ведёт на страницу ДОСТАВКА. Как сделать так, чтобы эта ссылка
*<a href="http://nadonenado.ru/page/Доставка/" alt="текст при наведение на ссылку"> Наличными курьеру  </a><br>

вела на описание на странице доставки сюда
"><span style="color:#000080;"><em><strong>Наличными курьеру</strong></em></span></span></span>

Спасибо!

#16 miyako

miyako

    Активный участник

  • Модератоpы
  • 5 372 сообщений

Отправлено 06 Август 2013 - 10:54

Просмотр сообщенияsotil (06 Август 2013 - 10:41) писал:

Не могу разобраться!
Со страницы ТОВАР ссылка ведёт на страницу ДОСТАВКА. Как сделать так, чтобы эта ссылка
*<a href="http://nadonenado.ru/page/Доставка/" alt="текст при наведение на ссылку"> Наличными курьеру </a><br>

вела на описание на странице доставки сюда
"><span style="color:#000080;"><em><strong>Наличными курьеру</strong></em></span></span></span>

Спасибо!

Код ссылки  в шаблоне Товар -
<a href="http://nadonenado.ru/page/Доставка#block_desc" alt="текст при наведение на ссылку"> Наличными курьеру  </a>
замените на -
<a href="http://nadonenado.ru/page/Доставка/" alt="текст при наведение на ссылку"> Наличными курьеру  </a>

А в описании страницы Доставка код -
<strong>Наличными курьеру</strong>
замените на -
<strong id="#block_desc">Наличными курьеру</strong>


#17 sotil

sotil

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 413 сообщений
  • ГородЕкатеринбург

Отправлено 06 Август 2013 - 21:35

что то не получилось

#18 Vaccina

Vaccina

    Активный участник

  • Модераторы
  • 24 353 сообщений

Отправлено 07 Август 2013 - 00:08

Вам необходимо в шаблоне "Товар" заменить вашу ссылку

<a href="http://nadonenado.ru/page/Доставка/" alt="текст при наведение на ссылку"> Наличными курьеру  </a>

на следующую ссылку

<a href="http://nadonenado.ru/page/Доставка#block_desc" alt="текст при наведение на ссылку"> Наличными курьеру  </a>

далее в описании страницы "Доставка" найти код (используя визуальный редактор - нажмите кнопку "Источник")

<strong>Наличными курьеру</strong>

и замените данный код на

<strong id="#block_desc">Наличными курьеру</strong>

Данным кодом мы задаем якорь block_desc если его ввести в адресную строку, и на странице будет элемент с идентификатором block_desc, то браузер автоматически перейдет к данному элементу.

После данных изменений не забудьте очистить кэш в вашем браузере.

#19 sotil

sotil

    Активный участник

  • Пользователи
  • PipPipPipPip
  • 413 сообщений
  • ГородЕкатеринбург

Отправлено 07 Август 2013 - 20:27

Просмотр сообщенияVaccina (07 Август 2013 - 00:08) писал:

Вам необходимо в шаблоне "Товар" заменить вашу ссылку

<a href="http://nadonenado.ru/page/Доставка/" alt="текст при наведение на ссылку"> Наличными курьеру </a>

на следующую ссылку

<a href="http://nadonenado.ru/page/Доставка#block_desc" alt="текст при наведение на ссылку"> Наличными курьеру </a>

далее в описании страницы "Доставка" найти код (используя визуальный редактор - нажмите кнопку "Источник")

<strong>Наличными курьеру</strong>

и замените данный код на

<strong id="#block_desc">Наличными курьеру</strong>

Данным кодом мы задаем якорь block_desc если его ввести в адресную строку, и на странице будет элемент с идентификатором block_desc, то браузер автоматически перейдет к данному элементу.

После данных изменений не забудьте очистить кэш в вашем браузере.

Не получается!
ТОВАР
<a href="http://nadonenado.ru/page/Доставка#block_desc" alt="текст при наведение на ссылку"> Наличными курьеру  </a><br>
СТРАНИЦА
<span style="font-size:12px;"><span style="font-family:verdana,geneva,sans-serif;"><span style="color:#000080;"><em><strong id="#block_desc">Наличными курьеру</strong></em></span></span></span>
КЭШ почистил, эти коды уже 2 дня стоят, в других браузерах попробовал, нет!

#20 Сake

Сake

    Активный участник

  • Модератоpы
  • 5 979 сообщений

Отправлено 08 Август 2013 - 01:45

В сообщениях есть небольшая опечатка. Вам необходимо заменить строку

<strong id="#block_desc">Наличными курьеру</strong>

на следующую

<strong id="block_desc">Наличными курьеру</strong>





Количество пользователей, читающих эту тему: 0

0 пользователей, 0 гостей, 0 анонимных