Рубрика: jQuery
Якорь это метка, до которой мы осуществляем переход, с какой либо ссылки в которой указан этот якорь #go1 это будет означать что перейти нам нужно до тега на странице у которого указан id=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({scrollTop: destination}, 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;
});
});
and
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]
Подскажите пожалуйста
я в джава скрипт ничего не понимаю
какой из этих трех кодов лучше
какой хуже
и почему
Спасибо!
Есть не плохое видео. Может поможет.
Как создать Jquery якорь «Плавная прокрутка страницы».
_https://www.youtube.com/watch?v=Zi947g6YglY
У меня вообще не работает ни один вариант с якорями. Везде пишет: Cannot read property ‘top’ of undefined
Ну и в целом не понятно, почему он должен покрутиться до якоря, даже если бы «топ» был дефайнд. Мы же берем офсет().топ у элемента на который кликнули, а он находится в самом верху!
В случае с правкой которую внес господин ZX все становится логично, но главное начинает работать.
Если возможно, объясните, пожалуйста
Круто!Спасибо)
Суупер, давно хотел что то подобное у себя на сайте не знал, как называется )))