Плавный скроллинг к якорю на 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 пишем следующее:
В результате, код скрипта будет подгружаться только при первом входе посетителя на сайт. В дальнейшем скрипт будет браться из кеша пользователя, и уменьшит трафик.
Проверить и посмотреть, как работает этот скрипт, можно нажав по следующей ссылке: плавный скролл наверх.
Создать закладку на материал через SzenMark| Категория: | Скрипты |
| Просмотрено: | 3117 |
| Рейтинг: | 3.0/5 |
| Дата добавления: | 03.03.2009 21:24, Вторник |
| Добавил: | Szen |
Дополнительно
Внимание
Все скрипты, инструкции, тесты, статьи и подборки, опубликованные в блоге портала, являются собственностью портала. Администрация портала не несет никакой ответственности за содержания статей и скриптов, но обязуется не публиковать материалы, нарушающие законодательство Российской Федерации, порнографию, инструкции по взлому и вскрытию. Администрация портала сама решает, кому помогать в решении какой-либо проблемы, а кому отказать в помощи. Цитируя наш текст и устанавливая опубликованные скрипты, вы соглашаетесь с тем, что используете продукт, созданный или подготовленный порталом SzenProgs. Портал SzenProgs оставляет за собой право менять инструкции, тесты, записи, подборки и скрипты по своему усмотрению и менять содержимое файлов, залитых на портале.
Любая, полная или частичная, публикация материала, размещенного в блоге портала SzenProgs, на другом стороннем от портала SzenProgs сайте должна сопровождаться ссылкой на источник.
Мини-форум
| № 0 | Вторник, 03.03.2009 21:24 |
Szen | Здесь вы можете задать вопрос или оставить комментарий по теме "Плавный скроллинг к якорю на JavaScript". |
| Профиль |
| № 1 | Четверг, 17.09.2009 13:40 |
3apa3a | подскажите а как отрегулировать скорость скролла, хочется медленнее |
| Профиль |
| № 2 | Четверг, 17.09.2009 15:14 |
| Szen | 3apa3a, этот скрипт не имеет регулируемых параметров. Скорость скролла определяется самим скриптом в зависимости от удаленности от якоря. Скролл происходит по логарифмической функции. Если нужен скролл с постоянной регулируемой скоростью, то отпишитесь, придумаем. |
| ПрофильWWW |
| № 3 | Четверг, 17.09.2009 15:42 |
| 3apa3a | Очень хочется скрипт с регулируемой скоростью вот пример http://aquarel-studio.ru/ я хочу так же реализовать навигацию по странице буду очень признателен если поможете |
| Профиль |
| № 4 | Четверг, 17.09.2009 19:41 |
| Szen | 3apa3a, новый материал готов. Читайте здесь: http://szenprogs.ru/blog/2009-09-17-70 |
| ПрофильWWW |
defaultNick5394(44), mihail300756(54), yakov(35), Бусябуся(17), Fimon307(23).
Желаем им счастья, здоровья, благополучия, любви и богатства!
С уважением, администрация сайта.
