Как сделать якорь Anchor c плавным переходом на сайте

Для онлайн учебников, да и просто удобной навигации по контексту сайта лучше всего использовать якорь ( Anchor ). Реализация якорей не сложна, но хотелось бы добиться плавного перехода. В этом поможет небольшой JavaScript скрипт. Демонстрацию скрипта можно увидеть внизу сайта.

Подключение:

Подключим сам скрипт для этого нужно добавить между тегами <head> </head> строку в шапке сайта.

<script type="text/javascript" src="AnchorScroller.js"></script>

2. Файл AnchorScroller.js необходимо положить в корневую папку. Если он распологаеться в другом месте в пункте 1 нужно указать другой путь к файлу.

Листинг файла AnchorScroller.js

function anchorScroller(el, duration) {
if (this.criticalSection) {
return false;
}
 
if ((typeof el != 'object') || (typeof el.href != 'string'))
return true;
 
var address = el.href.split('#');
if (address.length < 2)
return true;
 
address = address[address.length-1];
el = 0;
 
for (var i=0; i<document.anchors.length; i++) {
if (document.anchors[i].name == address) {
el = document.anchors[i];
break;
}
}
if (el === 0)
return true;
 
this.stopX = 0;
this.stopY = 0;
do {
this.stopX += el.offsetLeft;
this.stopY += el.offsetTop;
} while (el = el.offsetParent);
 
this.startX = document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft;
this.startY = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
 
this. stopX = this.stopX - this.startX;
this.stopY = this.stopY - this.startY;
 
if ( (this.stopX == 0) && (this.stopY == 0) )
return false;
 
this.criticalSection = true;
if (typeof duration == 'undefined')
this.duration = 500;
else
this.duration = duration;
 
var date = new Date();
this.start = date.getTime();
this.timer = setInterval(function () {
var date = new Date();
var X = (date.getTime() - this.start) / this.duration;
if (X > 1)
X = 1;
var Y = ((-Math.cos(X*Math.PI)/2) + 0.5);
 
cX = Math.round(this.startX + this.stopX*Y);
cY = Math.round(this.startY + this.stopY*Y);
 
document.documentElement.scrollLeft = cX;
document.documentElement.scrollTop = cY;
document.body.scrollLeft = cX;
document.body.scrollTop = cY;
 
if (X == 1) {
clearInterval( this.timer);
this.criticalSection = false;
}
}, 10);
return false;
}

3. Реализуем привязку якоря

Вызываем сам якорь ссылкой

<a href="#link" onclick="return anchorScroller(this)"> Перейти к якорю </a>

Указываем сам якорь

<a name="link"></a>

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

JavaScript

Прикреплённые файлы

AnchorScroller.js.txt1.63 КБ

Оставить комментарий
877 просмотров

Alex 28 декабря, 2013

А если много якорей? Как сделать

Nickel 23 марта, 2014

Урок по "Как сделать якорь Ahchor..."очень понравился ,только у меня вот такая проблема есть ,скрипт действует только при переходе на ссылку ,а мне нужно на блок divс idа также когда перешел по ссылки блок уходит под меню так как оно зафиксировано , хотелось бы верхний отступ пикселей 150 ,если можно поможите чем сможите , заранее благодарен

SuperAdmin 23 марта, 2014

Я не совсем понял как именно должно срабатывать. Смею предположить что при переходе на якорь div обёртка доезжает до верха без отступа. А отступ нужен. Ели я понял верно то просто можно отрегулировать css создав отступ.Также можно сам якорь в страничке переместить в нужное место - центрирует по якорю

Владимир 19 февраля, 2015

Красота!!! Все работает, большое спасибо!)

Денис 27 мая, 2015

Спасибо, все работает)

Владимир 11 августа, 2016

Класс. Все работает

Андрей 17 августа, 2016

Чувак! Ты супер!!! Самый толковый скрипт который я нашел проковыряв в инете кучу статей по данному вопросу. Везде один говнокод. То меню блокирует переходы по другим ссылкам то ещё что то а это просто все, доступно и зашибись работает.
СПАСИБИЩЕ!