Якоря

[DelayDobro]

ребята не могу понять ....  помогите разобраться

хочу в описаниях товара сделать якоря для более удобного чтения... 

обычная ссылка на якоpь

<a href="#optv">Описание товара</a>

<a name="optv"></a>

беда собственно в чем.. при нажатии на ссылку кидает на главную страницу сайта... если написать полный путь то работает ... но смысл в том чтоб приписать это в прайсе внутри каждого товара - соответственно ссылки должны быть одинаковые

[mazein]

Тут про якоря всё расписано.

[DelayDobro]

я эту ссылку по буквам уже знаю

[DelayDobro]

и я думаю ты мне ее кинул потому что ее первую выдает гугл 

[mazein]

Думай как хочешь.

У меня всё работает.

[mazein]

Кстати там ещё вот что написано.

 

[DelayDobro]

да ты почитай там в коментариях пишут что статья 2000 года - name уже давно все забыли и спользуют id ... и в шаблоне как я думаю не работаю якоря в полном описании

[DelayDobro]

согласен думаю может быть и такое) но то уже не для моего ума

[DelayDobro]

хотя ссылку я такую впоймал )

[DelayDobro]

я сайтами мес занимаюсь... для меня это как ночью в лес пойти .. .

http://prntscr.com/ec2dgn вот я нашел эту ссылку а где ее искать в файлах я хз ) 

[mazein]

/catalog/view/theme/moneymaker2/template/common/header.tpl

 

После редактирования не забудь обновить модификаторы.

[DelayDobro]

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

[mazein]

Тогда использовать js, например этот.

[DelayDobro]

вязал крутил его ) ничего не вышло ) все в ошибка и все)

[Sireox]

Проблема с якорями в OpenCart возникает из-за строчки <base href="<?php echo $base; ?>" /> в файле\catalog\view\theme\*\template\common\header.tpl

Если в остальных движках ее нет и там якорь подставляется автоматически в конец адреса страницы, например, site.ru/page.html#yakor то в OpenCart он подставляется сразу после названия сайта, т.е. site.ru/#yakor Кроме того, как я понял, во многих шаблонах табы, например, в товарах тоже работают по принципу якоря и если использовать стандартный jQuery-код прокрутки к якорю - то они конфликтуют.

 

Решить можно разными путями - через PHP или JS, но убирать <base href="<?php echo $base; ?>" /> думаю не стоит точно. У меня цель была создать оглавление с плавной прокруткой и т.к. шаблон без JavaScript в принципе не работает, то и нормальный якорь с полным адресом страницы нам не нужен, главное, чтобы работало оглавление и была плавная прокрутка. И чтобы не было конфликта с табами я использовал jQuery который ориентируется на класс, а не на #. Выглядит это так:

<script type="text/javascript" >
    $('.anchor').click(function(){
        var target = $(this).attr('href');
        $('html, body').animate({scrollTop: $(target).offset().top}, 800);
        return false;
    });
</script >

Сам якорь задается через id: 

<h2 id="yakor">Заголовок на который цепляем якорь</h2>

А ссылку на него в оглавлении указываем через <a href> с классом anchor:

<a class="anchor" href="#yakor">Ссылка из оглавления</a>

Если нужно дать ссылку с другой страницы или сайта на нужно место, просто указываете полную ссылку с якорем - это она будет работать по умолчанию, например, http://site.ru/page.html#yakor

 

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

[Guava]

@Sireox спасибо

[Sergey36]

В 15.11.2017 в 14:23, Sireox сказал:

 

<script type="text/javascript" >
    $('.anchor').click(function(){
        var target = $(this).attr('href');
        $('html, body').animate({scrollTop: $(target).offset().top}, 800);
        return false;
    });
</script >

 

Куда нужно вставить этот скрипт?

[Sireox]

@Sergey36 в любое место на странице или в отдельный файл со скриптом, который соответственно так же нужно добавить на страницу.

[Vitulus]

On 11/8/2019 at 1:50 PM, Sireox said:

 в любое место на странице или в отдельный файл со скриптом, который соответственно так же нужно добавить на страницу.

Можете подсказать, что я делаю не так ? Не работает якорь, пытаюсь применить совет @Sireox

1. Для теста работы якоря в созданной информационной статье создал ссылку <a class="anchor" href="#yakor">Внушительный</a>, нажимая не неё не переносит к якорю, который расположен в этой же статье... <span id="#yakor" style="font-size: 14px;">Выбор за Вами !</span>

2. Текст кода скрипта расположен в отдельном файле anchor.js

3. Пытаюсь подключить в статье (<script src="catalog/view/javascript/anchor.js"></script>), эта строчка исчезает. Пробовал полностью вставить код, тоже не срабатывает, исчезает (((.

 

 

 

[olegodessa]

не получился у меня метод @Sireox

После  поисков в гугле набрел на скрипт anchor.js

Постараюсь описать подробно для таких же как и я чайников:

1. закачиваем себе на сайт файл anchor.js в любое удобное место, можно как у меня в примере

2. подключаем скрипт у себя в шаблоне, обычно в каждом шаблоне в настройках есть место для установки сторонних скриптов - туда и копируем:

<script src="/catalog/view/javascript/jquery/anchor.js"></script>
<script>
$( 'document' ).ready( function() {
	$( 'a[href*=#]' ).anchor( {
		transitionDuration : 500, // время анимации в миллисекундах
		transitionTimingFunction: 'linear' // тип анимации, по умолчанию 'swing'
	} );
} );
</script>

3. ставим ссылки на якоря на странице, как было описано выше, например:

<a href="#description">Описание</a>

4. Ставим якоря,  например:

<h2 id="description">Читаем описание</h2>

Пользуемся.

Файл anchor.js в приложении.

anchor.js

Змінено 23 січня 2021 користувачем olegodessa

[Prooksius]

@olegodessa, у вас такой метод сделает нерабочими табы, если таковые есть на странице (например на стр. товара)
Надо проверять, если это не ссылка таба, то подключать этот ancor.

[olegodessa]

Подключил на tab-description. Всё работает, табы переключаются. Можно поставить любой другой якорь, какой угодно при желании.

Змінено 24 січня 2021 користувачем olegodessa

[SaOP]

В 23.01.2021 в 21:16, olegodessa сказал:

не получился у меня метод @Sireox

После  поисков в гугле набрел на скрипт anchor.js

Постараюсь описать подробно для таких же как и я чайников:

1. закачиваем себе на сайт файл anchor.js в любое удобное место, можно как у меня в примере

2. подключаем скрипт у себя в шаблоне, обычно в каждом шаблоне в настройках есть место для установки сторонних скриптов - туда и копируем:

3. ставим ссылки на якоря на странице, как было описано выше, например:

4. Ставим якоря,  например:

Пользуемся.

Файл anchor.js в приложении.

 

 

Что бы не использовать глобально предложенный скрипт, который, к слову, РАБОТАЕТ и решает проблему якорей, я втыкаю его содержимое в конкретные статьи, HTML код той или иной страницы через админку. Он не особо большой:

 

Спойлер

  
 <script>
;(function ($) {
	
	window.anchor = {
		
		/**
		 * Default settings
		 *
		 */
		settings: {
			transitionDuration: 2000,
			transitionTimingFunction: 'swing',
			labels: {
				error: 'Couldn\'t find any section'
			}
		},

		/**
		 * Initializes the plugin
		 *
		 * @param	{object}	options	The plugin options (Merged with default settings)
		 * @return	{object}	this	The current element itself
		 */
		init: function (options) {
			// Apply merged settings to the current object
			$(this).data('settings', $.extend(anchor.settings, options));

			return this.each(function () {
				var $this = $(this);

				$this.unbind('click').click(function (event) {
					event.preventDefault();
					anchor.jumpTo(
						anchor.getTopOffsetPosition($this),
						$this.data('settings')
					);
				});
			});
		},

		/**
		 * Gets the top offset position
		 *
		 * @param	{object}	$object				The root object to get sections position from
		 * @return	{int}		topOffsetPosition	The top offset position
		 */
		getTopOffsetPosition: function ($object) {
			var href = $object.attr('href'),
				$section = $($(href).get(0)),
				documentHeight = $(document).height(),
				browserHeight = $(window).height();

			if (!$section || $section.length < 1) {
				throw new ReferenceError(anchor.settings.labels.error);
			}

			if (($section.offset().top + browserHeight) > documentHeight) {
				return documentHeight - browserHeight;
			} else {
				return $section.offset().top;
			}
		},
		
		/**
		 * Jumps to the specific position
		 *
		 * @param	{int}		topOffsetPosition	The top offset position
		 * @param	{object}	settings			The object specific settings
		 * @return	{void}
		 */
		jumpTo: function (topOffsetPosition, settings) {
			var $viewport = $('html, body');

			$viewport.animate(
				{scrollTop: topOffsetPosition},
				settings.transitionDuration,
				settings.transitionTimingFunction
			);

				// Stop the animation immediately, if a user manually scrolls during the animation.
			$viewport.bind('scroll mousedown DOMMouseScroll mousewheel keyup', function(event){
				if (event.which > 0 || event.type === 'mousedown' || event.type === 'mousewheel') {
					$viewport.stop().unbind('scroll mousedown DOMMouseScroll mousewheel keyup');
				}
			});
		}

	};

	$.fn.anchor = function (method) {
			// Method calling logic
		if (anchor[method]) {
			return anchor[method].apply(this, Array.prototype.slice.call(arguments, 1));
		} else if (typeof method === 'object' || !method) {
			return anchor.init.apply(this, arguments);
		} else {
			return $.error('Method ' + method + ' does not exist on jQuery.anchor');
		}
	};

})(jQuery);
   
</script> 
  
  <script>
$( 'document' ).ready( function() {
	$( 'a[href*=#]' ).anchor( {
		transitionDuration : 500, // время анимации в миллисекундах
		transitionTimingFunction: 'linear' // тип анимации, по умолчанию 'swing'
	} );
} );
</script>

 

 

Спасибо!

 

Ещё хочу отметить один странный нюанс.

Если разметка div не начинается со строки (div class="row") а внутри блока div находится якорь на тег h1(h2...6) - на телефонах прокручивание страницы может быть не точным, т.е. не до указанного места. Лучше начинать разметку с div class="row".

 

Змінено 20 лютого 2021 користувачем SaOP