Jquery плавный переход к якорю

Якорь это метка, до которой мы осуществляем переход, с какой либо ссылки в которой указан этот якорь #go1 это будет означать что перейти нам нужно до тега на странице у которого указан или name=go1

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

$(document).ready(function() <
$(«a.scrollto»).click(function () <
var elementClick = $(this).attr(«href»)
var destination = $(elementClick).offset().top;
jQuery(«html:not(:animated),body:not(:animated)»).animate(, 800);
return false;
>);
>);

Можно конечно и так сделать для всех якорей на сайте, плавный переход

$(document).ready(function() <
$(‘a[href*=#]’).bind(«click», function(e) <
var anchor = $(this);
$(‘html, body’).stop().animate( <
scrollTop: $(anchor.attr(‘href’)).offset().top
>, 1000);
e.preventDefault();
>);
return false;
>);

$(document).ready(function() <
$(‘a[href^=»#»]’).click(function() <
var el = $(this).attr(‘href’);
$(‘body’).animate( <
scrollTop: $(el).offset().top>, 2000);
return false;
>);
>);

P.S.: Все эти примеры работают с обычным способом перехода по якорям, так что при отключенном скрипте, будет все переходить как надо, как обычно скачком, просто без анимации

комментариев 9 для записи Плавная прокрутка (якорь на jquery)

Суупер, давно хотел что то подобное у себя на сайте не знал, как называется )))

У Вас есть одна недоработка. Скрипт цепляет только по ID якорей. А в классике (и все редакторы так работают) якорь вешается на NAME

Чуток дописал на этот случай.

[code]
$(‘a[href*=#]’).bind(«click», function(e) <
var anchor = $(this);
var name = anchor.attr(‘href’).replace(new RegExp(«#»,’gi’), »);
$(‘html, body’).stop().animate( <
scrollTop: $(‘a[name=’+name+’]’).offset().top
>, 1000);
e.preventDefault();
return false;
>);
[/code]

Спасибо ZX согласен по замечанию, но я от атрибута name отказываюсь как и W3C, поддержки данного атрибута в HTML5 нет, его заменяет ID.

Подскажите пожалуйста
я в джава скрипт ничего не понимаю
какой из этих трех кодов лучше
какой хуже
и почему
Спасибо!

Вадим, если вы знаете хорошо html и css то понимать код jQuery не составит труда.
1. Якорь работает при указанном классе «scrollto» на ссылке.
2. Тоже по классу но уже «ancLinks», задана скорость там разная, в принципе ничем не отличаются друг от друга, они все кроссбраузерные.
3. Ничего прописывать дополнительно не надо, если в ссылке прописан якорь то скрипт подцепляется и делают плавным ваш переход по якорю на странице, более универсален, не подходит для тех случаев когда у вас якоря могут выполнять не стандартную функцию слайды, переход по страницам без перезагрузки и тп.

Есть не плохое видео. Может поможет.
Как создать Jquery якорь «Плавная прокрутка страницы».
_https://www.youtube.com/watch?v=Zi947g6YglY

Добавил, неплохое видео.

У меня вообще не работает ни один вариант с якорями. Везде пишет: Cannot read property ‘top’ of undefined
Ну и в целом не понятно, почему он должен покрутиться до якоря, даже если бы «топ» был дефайнд. Мы же берем офсет().топ у элемента на который кликнули, а он находится в самом верху!
В случае с правкой которую внес господин ZX все становится логично, но главное начинает работать.
Если возможно, объясните, пожалуйста

CMS системы (13)
- MODx (1)
- WordPress (12)
CSS верстка (24)
- CSS3 (7)
Flash код (2)
HTML верстка (18)
- Формы (4)
JavaScripts (14)
jQuery (22)
- JQ mobi (2)
LAN (2)
MS IE (15)
- IE6 (11)
PHP (3)
SEO (2)
ОС (11)
- Windows 7 (7)
- Windows 8 (1)
Софт (7)
Фишки (18)

Поделись с друзьями

Якоря и плавный переход по якорным ссылкам

2020-06-17
- 28
- Май
  2015

Доброго времени суток.

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

И так, давайте узнаем для начала, что такое якорные ссылки или просто якоря. Якорные ссылки — это ссылки, которые перемещают посетителя на определенные места на странице. По своей сути, это как закладки. Если страница имеет большой объем и по сути разделена разными блоками, можно сделать так, чтобы посетитель смог сразу перейти на нужную часть страницы, не пользуясь скроллом.

Такие якорные ссылки часто используются на страницах F.A.Q.. На таких страницах, много разных пунктов с ответами на частые вопросы. Чтобы в ручную не прокручивать весть текст, в начале располагаются эти вопросы с ссылками на нужный абзац. Так же часто такие якорные ссылки используют в лендингах (посадочных страницах). Я тоже часто использую в лендингах такие якоря, если заказчик просит об этом. Лендинги часто длинные и поэтому такие якоря не плохой помощник.

Пример работы таких ссылок можно посмотреть на этой страничке:

Как сделать переход по якорным ссылкам внутри страницы? Все очень просто. Основная идея в том, чтобы вместо ссылки указать именно имя якоря.

Для начала нужно просто создать ссылку и вместо пути указать якорь и знак решетка перед ним — #

Якорем будет блок с ID — #yak1. Далее просто прописываем нужный элемент с нужным айди.

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

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

Для начала в шапку перед закрывающимся head или в подвал перед закрывающимсяbody нужно подключить библиотеку jQuery.

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

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

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

В шестой строке указана цифра 1500 — время в миллисекундах и равно 1,5 секундам. Это время за которое совершается переход к нужному якорю. Чтобы ускорить или замедлить анимацию, просто измените число.

По желанию задаете стили в соответствии с внешним видом страницы и наслаждаемся результатом Возможно Вы также захотите, чтобы у посетителя была возможность вернуться наверх, в этом Вам поможет статья — кнопка возврата на верх страницы java и jquery.

На этом все, спасибо за внимание.

Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты 🙂

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

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

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

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

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

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

Метка на странице для перехода на нее

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

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

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

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

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

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

Нюансы

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

Метка на странице для перехода на нее

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

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

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

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

Плавная прокрутка CSS по якорным ссылкам

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

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

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

Где стразу рассмотрим несколько примеров:

Но начнем с основы:

Что такое якорные ссылки и для чего они нужны?

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

Как уже поняли, стоит посетителю сделать клик по ссылки или заданному элементу, к которому закреплена ссылка на якорь, то здесь он автоматически перемещается в ту часть страницы, где вы изначально закрепили якорь, все очень просто и не так сложно, что могло изначально показаться.

Как создать якорную ссылку?

Первый вариант:

Задаем ссылке через хэштег ссылку такого вида:

Ссылка
Ссылка
Ссылка
Ссылка

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

Как сделать плавную прокрутку якоря на чистом JS?

Все просто, нужно скриптами добавляем следующий код:

const anchors = document.querySelectorAll(‘.link_box a[href*=»#»]’)

for (let anchor of anchors) <
anchor.addEventListener(‘click’, function (e) <
e.preventDefault()

const blockID = anchor.getAttribute(‘href’).substr(1)

document.getElementById(blockID).scrollIntoView( <
behavior: ‘smooth’,
block: ‘start’
>)
>)
>

На этом все, так как плавная прокрутка якорной ссылки полностью установлена.

Второй вариант:

Для начала нужно просто создать ссылку и вместо пути указать якорь и знак решетка перед ним — #

Якорем будет блок с ID — #yak1. Далее просто прописываем нужный элемент с нужным айди.

Для начала в шапку перед закрывающимся head или в подвал перед закрывающимсяbody нужно подключить библиотеку jQuery.

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

В одной из строк заданна цифра 1500, которая идет за время в миллисекундах, это значит ровно 1,5 секундам. Что вы самостоятельно задаете временной отрезок времени, а значит можете сделать плавный или быстрый скролл, так как за это время идет переход к нужному якорю.

Cсылка якорь на странице. Плавный якорь.

В данной статье пойдет речь о том, что такое html cсылка якорь на странице сайта и вдобавок приведу простейший пример плавной прокрутки до якоря на JQuery.

Cсылка якорь на странице это не что иное как элемент тавигации по контенту страницы. Обычно веб-мастера используют такие ссылки для навигации по разделам. Особенно актуальны такие ссылки, когда на странице много контента, состоящего из нескольких разделов.

Также в меню одностраничников Landing Page используются якоря навигации по разделам. Та же кнопка наверх — не что иное, как ссылка якорь.

Cсылки якоря на странице являются одной из составляющих CEO оптимизации статьи, так как они повышают юзабилити сайта, и поисковые системы обращают на это свое внимание.

Как сделать html ссылку якорь на странице

Cделать html ссылку якорь на странице очень просто. Для этого нужно:
Присвоить в нужном месте страницы, например заголовку раздела страницы идентификатор ID .

id=»razdel» — это и есть идентификатор ID, который я присвоил заголовку одного из разделов воображаемой страницы. Название идентификатора может быть любым, но должно использоваться только один раз на странице.

Теперь осталось создать обычную html ссылку и ссылаться она должна на присвоенный разделу идентификатор ID :

При нажатии на такую ссылку осуществиться переход до якоря —

Плавный якорь jQuery

Единственным визуальным недостатком html ссылок якорей является переход к разделам как-бы рывком. Но этот недостаток устраняется подключением небольшого скрипта плавного скролла при прокрутке страницы до якоря.

Библиотека jQuery

Для создания плавных якорей при прокрутке страницы необходимо подключение библиотеки jQuery. На WordPress библиотека jQuery подключена по умолчанию.

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

В данном скрипте можно настроить скорость прокрутки до якоря изменив значение 1000 на другое.

На этом на сегодня все.

Скачать оба примера

Лучший способ отблагодарить автора

6 thoughts on “ Cсылка якорь на странице. Плавный якорь. ”

Лариса02.12.2015 at 1:02 пп

спасибо за скрипт — переходит плавно и красиво)
но у меня свой косяк — верхнее меню фиксируется при прокрутке страницы и получается, что при переходе по якорю к данному блоку, этот блок заходит под меню.
не подскажете — как мне это побороть?

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

а что нужно в скриптик дописать?)

перенесла якоря в пустой div над каждым блоком и в css указала для него , где 70px — высота моего фиксированного меню. прокрутка стала идеальной
будет очень любезно с вашей стороны, если подскажете, насколько грамотным можно считать такой код и можно ли его в дальнейшем использовать для подобных случаев. или все-таки лучше через скрипт? я только начинаю все это изучать)
еще раз спасибо!

Вот так попробуйте

В СSS добавьте. ТУТ #ancor — якорь. Но нужно будет через запятую указать все якоря

Положительный padding и отрицательный margin
Используем padding для создания отступа и отрицательный margin, чтобы этот же отступ убрать, а точнее — сделать его незаметным для пользователей.

Обратите внимание, что внутренные отступы padding тоже попадают под заливку, то есть, если у вашего элемента будет фон, то он скорее всего наедет на контент перед ним. Для того, чтобы игнорировать padding при добавлении фона на элемент, используйте CSS-свойство background-clip:content-box.

scrollTop: $(jQuery(this).attr(«href»)).offset().top — ($(‘айди_фиксированное_меню’).height())