Приветствую вас читатели моего блога. Сегодня мы поговорим о таком интересном эффекта как плавная прокрутка страницы до определённого места.
В качестве ДЕМО вы можете посмотреть работу нижестоящего блока.
Навигация по статье:
Что нам для этого понадобится?
Для того чтобы сделать плавной прокрутку до любого места на странице сайта нам понадобится:
- 1. Подключить библиотеку Jquery
- 2. Расставить якоря в тех местах до которых будет плавно прокручиваться страница сайта
- 3. Расставить ссылки, по нажатии на которые будет осуществляться плавная прокрутка.
- 4. Прописать специальный скрипт.
- 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 все становится логично, но главное начинает работать.
Если возможно, объясните, пожалуйста
