Как создать якорь?

КАК СОЗДАТЬ ЯКОРЬ?

Если для кого-то непонятен термин ЯКОРЬ, то в данной теме я расскажу об этом, а так же как создать якорь и его использовать. Ведь использование якоря не только удобство, но и необходимо для SEO. В глазах поисковиков это выглядит как плюс вашему сайту. Ну о данном факте могут не знать только начинающие.

Якорь(англ. anchor) — это своего рода ярлык, выполненный в виде гиперссылки, который указывает на другое место в сайте.

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

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

ЯКОРЬ В ПРЕДЕЛАХ ОДНОЙ СТРАНИЦЫ.

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

<a href="#metka">>Параграф 1</a>

То есть вы заключаете в тег то слово или часть текста, которое делаете кликабельным и от него будет переброс к метке, а в том месте, куда вы хотите сделать переброс, указываете метку, которые можно сделать двумя способами:

1 способ:

<a name="metka">Текст</a>

2 способ:

<a id="metka">Текст</a>

Иными словами в указателе стоит имя metka, вот по имени метки и происходит переброс. Имейте в виду, что имена меток не должны повторяться, а если такое произойдет, то будет путаница с переходами. То бишь будут 2 указателя ссылаться на одну и ту же метку.
Страшного ничего нет, но переход будет не к тому месту, в который вы ожидали.

ЯКОРЬ В ПРЕДЕЛАХ СВОЕГО ИЛИ ДРУГОГО САЙТА

В данном случае указатель будет выглядеть чуток иначе:

<a href="myborder.ru/site1#metka">Текст</a>

Как вы заметили это не сложно.

Хотел бы акцентировать ваше внимание на том, что в некоторых случаях нужно создать якорь с отступом. То есть после перехода по якорю на метку текст начинается вверху страницы, а это неудобно тогда, когда шапка или меню вверху сайта наезжает на текст и получается так, что шапка закрывает этот текст. После открытия метки мы не видим несколько предложении, иногда это неудобно.

Так вот, чтобы такого не было применяют якорь с отступом.

ЯКОРЬ С ОТСТУПОМ 4 ВАРИАНТА

1 вариант:

Пометка: В данном случае браузер должен поддерживать background-clip:content-box, если выводите фон элемента.

#link-C {
	padding-top: 55px;
	margin-top: -55px;
	-webkit-background-clip: content-box;
	background-clip: content-box;
}

2 вариант:

Пометка: браузер должен поддерживать CSS псевдоэлементы

Если элемент содержит заливку или фон, то метод может работать некорректно. Так же может работать некорректно, если код содержит border-top или padding-top.

#link-B:before {
	display: block;
	content: "";
	height: 55px;
	margin: -55px 0 0;
}

3 вариант:

#link-D {
	border-top: 55px solid transparent;
	margin-top: -55px;
	padding: 15px; /* можно использовать пэддинги */
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
}

4 вариант:

Пометка: Браузер должен поддерживать псевдоэлементы и если у вас есть фон или заливка, то можно использовать background-clip.

#link-E {
	position: relative; /* псевдоэлемент позиционируется относительно него */
	border-top: 55px solid transparent;
	margin-top: -55px;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	background-clip: padding-box;
}
#link-E:before {
	content: "";
	position: absolute;
	top: -2px; 
	left: 0;
	right: 0;
	border-top: 2px solid #ccc;
}

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

Думаю, как и мне, вам обязательно какой-нибудь вариант да подойдет.

Удачного использования!

Источник: https://myborder.ru Как создать якорь?
Заработок. Опубликовано: 2016-12-15

Отправить ответ

Оставьте первый комментарий! NOFOLLOW ссылка.

Уведомления
avatar