Menu

Плавная прокрутка до якоря на JavaScript

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

Поискав в интернете  нашлась хорошая реализация. Одновременно небольшая и простая.

Демонстрацию можно посмотреть здесь

Код представлен ниже.

Файл 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;
}

Собственно, сам HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru-ru" lang="ru-ru" >
 
<head>
 
<title>AnchorScroller</title>
 
<script type="text/javascript" src="AnchorScroller.js"></script>    <em><strong><!--  ПОДКЛЮЧЕНИЕ AnchorScroller --></strong></em>
 
< /head>
 
<body>
<a href="#link" onclick="return anchorScroller(this)">Ссылка</a>   <em><strong><!-- ССЫЛКА НА ЯКОРЬ --></strong></em>
 
<div style="height:1000px;background-color:green;"></div>  <strong><em><!--БЛОК для увеличения отступа от ссылки до якоря (для демонстрации)--></em></strong>
 
<a name="link"></a> <em><strong><!--САМ ЯКОРЬ--></strong></em>
 
<div>
Содержимое для просмотра
</div>
 
</body>
</html>

Комментарии

13 комментариев

Добавить комментарий

Ваш адрес email не будет опубликован.

Последние посты
Sidebar