Плавный скроллинг к якорю на JavaScript
Скрипты
Решил сделать небольшую примочку к сайту - плавный скроллинг к определенному якорю. Информации на тему плавного скроллинга в сети очень много, но ни одна из них меня не устроила. На тестах выяснилось, что многие из них не доведены до нужного состояния. Одни требуют дополнительных модулей js, другие громоздки и неповоротливы, третьи не учитывают многих факторов. Вот и написал свой скрипт.
Итак, делаем плавный скроллинг к определенному нами якорю.
Начнем с того, что напишем сам скрипт в раздел HEAD нашего сайта. Выглядит он следующим образом:
function GetPos(elem){
var offTrial=document.getElementById(elem);
var offL=0;
var offT=0;
while(offTrial){
offL+=offTrial.offsetLeft;
offT+=offTrial.offsetTop;
offTrial=offTrial.offsetParent;
}
if (navigator.userAgent.indexOf("Mac")!=-1 && typeof document.body.leftMargin!="undefined") {
offL+=document.body.leftMargin;
offT+=document.body.topMargin;
}
return {x:offL , y:offT}
}
function GetPosObj(obj){
var offL=0;
var offT=0;
while(obj){
offL+=obj.offsetLeft;
offT+=obj.offsetTop;
obj=obj.offsetParent;
}
if (navigator.userAgent.indexOf("Mac")!=-1 && typeof document.body.leftMargin!="undefined") {
offL+=document.body.leftMargin;
offT+=document.body.topMargin;
}
return {x:offL , y:offT}
}
function scrollIt(obj){
elto = obj.getAttribute('href');
elto = elto.substr(elto.indexOf('#')+1)
elposfrom = GetPosObj(obj);
elposto = GetPos(elto);
yfrom = elposfrom.y;
yto = elposto.y;
if (yfrom >= yto){
for (i = yfrom; i >= yto; i = (i / 2)-1){
self.scroll(0,i);
}
for (j = i * 2; j >= yto; j--){
self.scroll(0,j);
}
} else {
ystep = (yto - yfrom) / 2;
for (i = yfrom; i <= yto-1; i = i + ystep){
self.scroll(0,i);
if (ystep > 100) {ystep = (ystep / 2) + 1;} else {ystep = 50;}
}
for (j = i; j <= yto-1; j++){
self.scroll(0,j);
}
}
}
--></script>
Немного распишем текст скрипта.
Первая функция скрипта выводит позицию элемента по значению ID. Нам она нужна для определения, куда будем скроллить. Вторая функция выводит позицию элемента, вызвавшего событие. В нашем случае она выдаст позицию ссылки, от которой мы будем переходить к якорю. Третяя функция - это сама реализация плавного перехода к якорю. В качестве параметра передавать нужно переменную this.
Далее, в теле документа (BODY) делаем метку (якорь), к которой мы хотим переместиться. Это можно сделать следующим образом:
В качестве якоря можно установить любой элемент. Главное, чтоб у него был задан ID. У меня этот элемент - DIV.
А теперь сама ссылка:
Вот и все. Плавный скроллинг к якорю полностью реализован. Осталось все сохранить и проверить работоспособность.
Хочу кое-что дополнить ко всему этому. Хорошим тоном будет вывести этот скрипт в отдельный файл. Для этого создаем файл, например, myscroll.js, открываем файл блокнотом и вставляем туда текст скрипта. Заливаем этот файл в корень сайта. Вместо кода скрипта в разделе HEAD пишем следующее:
В результате, код скрипта будет подгружаться только при первом входе посетителя на сайт. В дальнейшем скрипт будет браться из кеша пользователя, и уменьшит трафик.
Проверить и посмотреть, как работает этот скрипт, можно нажав по следующей ссылке: плавный скролл наверх.
Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.
x;z-index:1 }Google+
Плавный скроллинг к якорю на JavaScript
Скрипты
Скрипты, инструкции, справочники
| Категория: | Скрипты |
| Просмотрено: | 13948 |
| Рейтинг: | 3.0/12 |
| Дата добавления: | 2009-03-03 21:24, Вторник |
| Добавил: | Szen |
Дополнительно к Плавный скроллинг к якорю на JavaScript
Мини-форум
| № 0 | 2009-03-03 21:24 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "Плавный скроллинг к якорю на JavaScript". |
| Гость |
| № 1 | 2009-09-17 13:40 |
3apa3a | подскажите а как отрегулировать скорость скролла, хочется медленнее |
| sergey |
| № 2 | 2009-09-17 15:14 |
Szen | 3apa3a, этот скрипт не имеет регулируемых параметров. Скорость скролла определяется самим скриптом в зависимости от удаленности от якоря. Скролл происходит по логарифмической функции. Если нужен скролл с постоянной регулируемой скоростью, то отпишитесь, придумаем. |
| Szen · WWW |
| № 3 | 2009-09-17 15:42 |
| 3apa3a | Очень хочется скрипт с регулируемой скоростью вот пример http://aquarel-studio.ru/ я хочу так же реализовать навигацию по странице буду очень признателен если поможете |
| sergey |
| № 4 | 2009-09-17 19:41 |
| Szen | 3apa3a, новый материал готов. Читайте здесь: http://szenprogs.ru/blog/2009-09-17-70 |
| Szen · WWW |
