Найти на сайте
  2. Форумы
  3. МАСТЕРСКАЯ
  4. HTML / CSS / PHP / JS / RegExp
  5. Ссылка на нужную часть страницы

Ссылка на нужную часть страницы

InstantCMS 2.X
#1 21 февраля 2018 в 01:28
Здравствуйте.
Как сделать ссылки на нужную часть страницы.
На пример как в landing page, вверху страницы есть кнопки "о нас, цены, портфолио, контакты и тд", нажимая на какуюнибудь из них, улетаешь на отдельную часть страницы (в ЛП на главную)

Я хочу так, в меню, О нас, Услуги, Контакты и тд.
Нажимая на о нас, попадаешь на страницу "о нас"
Нажимая на услуги, попадаешь на страницу так же "о нас", но на тот участок где описываются услуги. и тд.

Благодарю.
0
#2 21 февраля 2018 в 01:35
Это якорные ссылки.
Обозначаете нужную секцию на странице, путём добавления id="about" как пример. И ссылку делаете с этим якорем #about.
Т.е. предположим у вас секция О нас. Подзаголовок обёрнут в тег h2. Тогда добавляете id для заголовка h2:
  1. <h2 id="about">О нас</h2>
А в меню прописываете ссылку 
  1. <a href="#about">О Нас</a>
0
#3 21 февраля 2018 в 01:55


Это якорные ссылки.
Обозначаете нужную секцию на странице, путём добавления id="about" как пример. И ссылку делаете с этим якорем #about.
Т.е. предположим у вас секция О нас. Подзаголовок обёрнут в тег h2. Тогда добавляете id для заголовка h2:

  1. О нас
А в меню прописываете ссылку 
  1. О Нас

SEOrigin

Сделал всё так, открывает " страница не найдена"

Должно открыться вот сюда:



Вот как добавил в страницу:



А в меню вот так:


ЧТо то я не то делаю… scratch
0
#4 21 февраля 2018 в 02:27

А в меню прописываете ссылку

SEOrigin
Скорей всего не сработает в двойке в штатном меню.

А в меню вот так:

@Aliaksandr

ЧТо то я не то делаю

@Aliaksandr
Да всё не так делаете.
А если б и "так" сделали, тоже не получится (читайте выше).
Выход: пункту меню назначить селектор, обработать клик по пункту скриптом.
Украинский для инстант
0
#5 21 февраля 2018 в 02:54


А в меню прописываете ссылку

SEOrigin
Скорей всего не сработает в двойке в штатном меню.

А в меню вот так:

@Aliaksandr

ЧТо то я не то делаю

@Aliaksandr
Да всё не так делаете.
А если б и "так" сделали, тоже не получится (читайте выше).
Выход: пункту меню назначить селектор, обработать клик по пункту скриптом.

Олег Васильевич я

А нельзя сделать якорь какойнибудь? на пример в страницу страницу через виджеты хтмл блоком добавить якорь (я называю это сейчас якорь, а так хз) и помтом в ссылке этот якорь обозначить, на пример instantcms.ru/forum/якорьhtml
0
#6 21 февраля 2018 в 06:41

А нельзя сделать якорь какойнибудь?… и помтом в ссылке этот якорь обозначить

@Aliaksandr
Выше, SEOrigin именно такой пример и привёл
Например, ссылка на этот ваш пост на этой странице будет — instantcms.ru/forum/thread29148-1.html#283304
А в якорь html выглядит так — <a href="#283304">#5</a>
0
#7 21 февраля 2018 в 13:19

А в якорь html выглядит так — <a href="#283304">#5</a>

Pocus
Лучше та не называть.
Украинский для инстант
0
#8 21 февраля 2018 в 15:01


Например, ссылка на этот ваш пост на этой странице будет — instantcms.ru/forum/thread29148-1.html#283304
А в якорь html выглядит так — #5

Pocus

Вставил код в страницу:

Ссылку сделал так адрессайта/pages/about.html#283304
Но страницу открывает как обычно, а не там где стоит код (внизу).
0
#9 21 февраля 2018 в 15:09
И, кстати, вопрос: А если надо сделать пункт меню "Позвонить" чтоб при клике звонилка открывалась а не страница? В коде-то ясно как, а вот в штатном меню на двойке?
Все идет хорошо, только мимо... Web-Studio «PAL» БЕСПЛАТНАЯ РАСКРУТКА САЙТОВ
0
#11 21 февраля 2018 в 17:59

Но страницу открывает как обычно, а не там где стоит код (внизу).

@Aliaksandr
1. Посмотрите код вашей страницы, якорь в ней присутствует? Может его типограф вырезает, хотя не должен.
2. На вашей странице должно быть достаточно много текста ниже якоря, иначе просто некуда будет её скроллить.
3. htmlbook.ru/samhtml/yakorya
0
#12 21 февраля 2018 в 18:30
тем же самым занят только осваиваю конструктор тем ссылка на тему

как сделать пункты меню активными после пролистывания? класс activ

и если я не могу поменять id блоков в конструкторе, можно как то не к id скролить а к классу или как то не отображать url в адресной строке браузера?
0
#13 21 февраля 2018 в 18:35
@Aliaksandr, в меню вставляйте ссылку так /#profil

назначайте класс пунктам меню "for_anchor"

и вставте скрипт для плавного скроллинга 

  1.  
  2. <script type="text/javascript">
  3.  
  4. 		$('.for_anchor a').bind('click.smoothscroll',function (event) {
  5.  
  6. 			event.preventDefault();
  7.  
  8. 			var target = this.hash,
  9. 			$target = $(target);
  10.  
  11. 			$('html, body').stop().animate({
  12. 				'scrollTop': $target.offset().top
  13. 			}, 1000, 'swing', function () {
  14. 				window.location.hash = target;
  15. 			});
  16.  
  17. 		});
  18.  
  19. 	</script>
  20.  
рецепт от Олег Васильевич я, за что ему спасибо.
0
#14 21 февраля 2018 в 18:46
но самая беда конечно что пункт активным не становится при переходе (хотя url меняется) и при прокрутке колесом мыши url не меняются (может это и не нужно, лишь бы пункты меня активными становились)
0
#15 22 февраля 2018 в 11:07
Решил делать меню вертикальными точками… вот код:

  1.  
  2. <script type="text/javascript">
  3.  
  4. jQuery(document).ready(function($){
  5. redrawDotNav();
  6. $(window).bind('scroll',function(e){redrawDotNav();});
  7. $('.n_1').click(function(){$('html, body').animate({scrollTop:0}, 1000);return false;});
  8. $('.n_2').click(function(){$('html, body').animate({scrollTop:$('#block-23').offset().top}, 1000);return false;});
  9. $('.n_3').click(function(){$('html, body').animate({scrollTop:$('#block-44').offset().top}, 1000);return false;});
  10. $('.n_4').click(function(){$('html, body').animate({scrollTop:$('#block-50').offset().top}, 1000);return false;});
  11. $('.n_5').click(function(){$('html, body').animate({scrollTop:$('#block-55').offset().top}, 1000);return false;});
  12. $('.n_6').click(function(){$('html, body').animate({scrollTop:$('#block-65').offset().top}, 1000);return false;});
  13.  
  14. $('#fix_nv a').hover(
  15. function(){$(this).prev('span').show();},
  16. function(){$(this).prev('span').hide();});
  17. });
  18. function redrawDotNav(){
  19. var section1Top =  0;
  20. var section2Top =  $('#block-23').offset().top - (($('#block-44').offset().top - $('#block-23').offset().top) / 2);
  21. var section3Top =  $('#block-44').offset().top - (($('#block-50').offset().top - $('#block-44').offset().top) / 2);
  22. var section4Top =  $('#block-50').offset().top - (($('#block-55').offset().top - $('#block-50').offset().top) / 2);
  23. var section5Top =  $('#block-55').offset().top - (($('#block-65').offset().top - $('#block-55').offset().top) / 2);
  24. var section6Top =  $('#block-65').offset().top - (($(document).height() - $('#block-65').offset().top) / 2);
  25. $('#fix_nv a').removeClass('actv_b');
  26. if($(document).scrollTop() >= section1Top && $(document).scrollTop() < section2Top){
  27. $('#fix_nv a.n_1').addClass('actv_b');
  28. } else if ($(document).scrollTop() >= section2Top && $(document).scrollTop() < section3Top){
  29. $('#fix_nv .n_2').addClass('actv_b');
  30. } else if ($(document).scrollTop() >= section3Top && $(document).scrollTop() < section4Top){
  31. $('#fix_nv .n_3').addClass('actv_b');
  32. } else if ($(document).scrollTop() >= section4Top && $(document).scrollTop() < section5Top){
  33. $('#fix_nv .n_4').addClass('actv_b');
  34. } else if ($(document).scrollTop() >= section5Top && $(document).scrollTop() < section6Top){
  35. $('#fix_nv .n_5').addClass('actv_b');
  36. } else if ($(document).scrollTop() >= section6Top){
  37. $('#fix_nv .n_6').addClass('actv_b');}  
  38. }
  39.  
  40. 	</script>
  41.  
Но и тут засада, почему то браузер выдаёт ошибку:
Uncaught SyntaxError: Unexpected token =
на строку:
= section2Top && $(document).scrollTop()

хелп!

Соответственно точки есть, скрол есть, но все прелести скрипта не арбайтен(((
0
Оформить главное меню.
Выделить запись в списке а-ля
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.

Похожие темы

Ищу исполнителя внешние ссылки на нужную страницу

Ищу исполнителя Создана 4 года назад 13 сообщений

[ЕСТЬ РЕШЕНИЕ] Пропадает часть кода в статьях

Типы контента / статьи / страницы Создана 1 год назад 7 сообщений

Как вместо 404 страницы через cmsCore::error404() , делать переадресацию на нужную мне страницу?

Разработка и тестирование Создана 3 года назад 5 сообщений

Видео по ссылке и импорт из вконтакте в instantvideo2

Форум Создана 8 месяцев назад 2 сообщения

Проблема в Конструкторе тем

Компоненты Создана 2 года назад 5 сообщений

[ЕСТЬ РЕШЕНИЕ] Вывести id страницы или полностью ссылку

HTML / CSS / PHP / JS / RegExp Создана 2 месяца назад 11 сообщений

InstantCMS Team

Связь с нами
Email dev@instantcms.ru

Делаем полезные Интернет проекты с 2008 года 💫

О проекте

Поддержка

Дополнения

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.