Якоря html с плавной прокруткой

Якоря html с плавной прокруткой

Приветствую вас читатели моего блога. Сегодня мы поговорим о таком интересном эффекта как плавная прокрутка страницы до определённого места.
В качестве ДЕМО вы можете посмотреть работу нижестоящего блока.

Навигация по статье:

Что нам для этого понадобится?

Для того чтобы сделать плавной прокрутку до любого места на странице сайта нам понадобится:

  1. 1. Подключить библиотеку Jquery
  2. 2. Расставить якоря в тех местах до которых будет плавно прокручиваться страница сайта
  3. 3. Расставить ссылки, по нажатии на которые будет осуществляться плавная прокрутка.
  4. 4. Прописать специальный скрипт.
  5. 5. Проверить работу.

Как правильно подключить Jquery?

Если ваш сайт работает на каком то движке, то вполне вероятно что библиотека Jquery уже подключена и подключать её повторно не нужно.

Если подключить эту библиотеку 2 раза то она может вообще не работать.

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

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

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

Скрипт плавной прокрутки

Так как скрипт реализован с применением 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 все становится логично, но главное начинает работать.
Если возможно, объясните, пожалуйста

Ссылка на основную публикацию
Эффект затемнения по краям
Вот эффект, который я использую довольно часто с моими собственными фотографиями, чтобы привлечь больше внимания к основной теме изображения или...
Что такое жесткий диск компьютера определение
Разобравшись, как подключить стационарный компьютер к Wi-Fi, установив и настроив на ПК необходимые программы, пользователь может сделать передышку и немного...
Что такое звуковые данные
Урок " Кодирование звуковой информации " Аналоговый и дискретный способы представления звука Информация, в том числе графическая и звуковая, может...
Эхо в наушниках как убрать на телефоне
У меня какая-то непонятная проблема с микрофоном: когда говоришь в него — слышишь в наушниках сам себя (если подключить колонки...
Adblock detector