Самоскрывающиеся якоря с плавной анимацией (jQuery)
- Задаем класс scrollTo ссылке, которая будет анкором
- Прописываем этой ссылке href="#nuzhnyi-element"
- Прописываем элементу, к которому нужно плавно проскроллить id="nuzhnyi-element"
Если на странице нет элемента, к которому нужно скроллить, то анкор не отображается.
$(document).ready(function() {
$("a.scrollTo").each(function () {
var elementClick = $(this).attr("href");
if (!$(elementClick).length) {
$(this).hide();
}
});
$("a.scrollTo").click(function () {
var elementClick = $(this).attr("href");
if ($(elementClick).length) {
var destination = $(elementClick).offset().top;
jQuery("html:not(:animated),body:not(:animated)").animate({
scrollTop: destination
}, 800);
}
return false;
});
});
Вариант, если вместо id используется name
$(document).ready(function() {
$("a.scrollTo").each(function () {
var elementClick = $(this).attr("href").replace('#', '');
var elementClickName = '*[name="' elementClick '"]';
if (!$(elementClickName).length) {
$(this).hide();
}
});
$("a.scrollTo").click(function () {
var elementClick = $(this).attr("href").replace('#', '');
var elementClickName = '*[name="' elementClick '"]';
if ($(elementClickName).length) {
var destination = $(elementClickName).offset().top;
jQuery("html:not(:animated),body:not(:animated)").animate({
scrollTop: destination
}, 800);
}
return false;
});
});