Плавный переход к якорю-ссылке

Декабрь 01, 2013   Александр Маврин   9 комментариев

Якорь-ссылка

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

Что такое якорь-ссылка

Якорь-ссылка (он же anchor), это специальная метка, которая заранее создается на странице в любом месте для быстрого перехода к конкретному месту. Обычно якоря используют при написании больших текстов различных мануалов, справок инструкций, правил. Расставляют их в каждый пункт и вначале страницы делают ссылки на них. делается это для удобства пользователя, который может в один клик перейти к интересующему его пункту, а не скроллить страницу вручную.

Как сделать ссылку-якорь HTML

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

<span name="anchor">Метка на странице для перехода на нее</span>

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

<a href="#anchor">Переход к метке на странице</a>

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

Плавный скроллинг к якорю

С развитием веб-технологий стало возможно делать более красивые, динамичные сайты с различными эффектами, анимацией и плавными переходами. И это на самом деле здорово, когда можно чем-то заинтересовать посетителя, помимо контента и оставить хорошие впечатления от посещения сайта. В определенной степени это играет на руку владельцу сайта. Для плавного перехода к якорю, будем использовать библиотеку jQuery и подключим совсем небольшой скрипт.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
$(document).ready(function() {
   $('a[href^="#"]').click(function () { 
     elementClick = $(this).attr("href");
     destination = $(elementClick).offset().top;
     if($.browser.safari){
       $('body').animate( { scrollTop: destination }, 1100 );
     }else{
       $('html').animate( { scrollTop: destination }, 1100 );
     }
     return false;
   });
 });
</script>

Подключить этот скрипт можно тремя способами. Первый, это вставить на страницу между тегами head. Второй — вынести в отдельный файл и подключить отдельно примерно таким образом:

<script type="text/javascript" src="./js/file.js"></script>

Третий способ — добавление кода в уже существующий js файл. Это может быть сам файл библиотеки jQuery. Кстати, как подключить библиотеку, читайте здесь. Если для подключение скрипта вы будете использовать второй или третий способ, то удалите из кода 1 и 14 строчки.

Нюансы

Теперь о нюансах использования. Во-первых якорям нужно задавать идентификаторы (вместо name прописать id). выглядеть это будет так:

<span id="anchor">Метка на странице для перехода на нее</span>

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

$("a.scroll").click(function () {

И добавить класс к ссылке:

<a href="#anchor" class="scroll">Переход к метке на странице</a>

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

http://serblog.ru/plavnyj-perexod-k-yakoryu-ssylke#anchor

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


Не стесняйтесь делиться записью в социальных сетях. Спасибо


9 комментариев
  1. Интересное решение, но я бы поигрался с селекторами, ведь якорь на странице как таковой нет и если javascript отключен будет проблема.

    например, можно сделать так:

    destination = $(‘a[name=»‘+ elementClick.substr(1) +'»]’).first().offset().top;

    На всякий случай использовал first() чтоб только первый элемент, но не пробовал… написал на вскидку, чтоб идею как-то оформить.

  2. Выходит, что так и есть. 😉

  3. Юлия:

    Спасибо огромное! Очень помогли!

  4. А я буквально на днях такой велосипед писал, неправильно гуглил и готовые решения не попадались.

  5. Кирилл:

    Неа, не работает. если с условием, то полностью ломает анкоры на сайте (не осуществляется переход).
    А если без него, то просто «прыгает», без плавностей.
    Придется делать самому.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *