Плавный скроллинг к якорю на JavaScript

Скрипты

Плавный скроллинг к якорю на JavaScript
оценка: 3.0 из 5
оценок: 12, отзывов: 4

Решил сделать небольшую примочку к сайту - плавный скроллинг к определенному якорю. Информации на тему плавного скроллинга в сети очень много, но ни одна из них меня не устроила. На тестах выяснилось, что многие из них не доведены до нужного состояния. Одни требуют дополнительных модулей js, другие громоздки и неповоротливы, третьи не учитывают многих факторов. Вот и написал свой скрипт.

Итак, делаем плавный скроллинг к определенному нами якорю.

Начнем с того, что напишем сам скрипт в раздел HEAD нашего сайта. Выглядит он следующим образом:

Code
  <script type="text/javascript" language="javascript"><--
  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) делаем метку (якорь), к которой мы хотим переместиться. Это можно сделать следующим образом:

Code
  <div id="ScrollToThis"></div>  

В качестве якоря можно установить любой элемент. Главное, чтоб у него был задан ID. У меня этот элемент - DIV.

А теперь сама ссылка:

Code
  <a href="#ScrollToThis" onClick="scrollIt(this);">Плавный скролл к якорю</a>  

Вот и все. Плавный скроллинг к якорю полностью реализован. Осталось все сохранить и проверить работоспособность.

Хочу кое-что дополнить ко всему этому. Хорошим тоном будет вывести этот скрипт в отдельный файл. Для этого создаем файл, например, myscroll.js, открываем файл блокнотом и вставляем туда текст скрипта. Заливаем этот файл в корень сайта. Вместо кода скрипта в разделе HEAD пишем следующее:

Code
  <script type="text/javascript" language="javascript" src="/myscroll.js"></script>

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

Проверить и посмотреть, как работает этот скрипт, можно нажав по следующей ссылке: плавный скролл наверх.

Вы можете присоедениться к моему микроблогу в Твиттере @SzenProgs. Буду благодарен, если оцените мой труд, и щелкните по звездочкам ниже.




Плавный скроллинг к якорю на JavaScript
Скрипты
Скрипты, инструкции, справочники

rss
Категория:Скрипты
Просмотрено:12752
Рейтинг:3.0/12
Дата добавления:2009-03-03 21:24, Вторник
Добавил:Szen

Мини-форум

№ 02009-03-03 21:24
Szen
Аватар участника Szen
Здесь вы можете задать вопрос или оставить комментарий по теме "Плавный скроллинг к якорю на JavaScript".
Гость
№ 1
2009-09-17 13:40
3apa3a
Аватар участника 3apa3a
подскажите а как отрегулировать скорость скролла, хочется медленнее
sergey
№ 2
2009-09-17 15:14
Szen
Аватар участника Szen
3apa3a, этот скрипт не имеет регулируемых параметров. Скорость скролла определяется самим скриптом в зависимости от удаленности от якоря. Скролл происходит по логарифмической функции. Если нужен скролл с постоянной регулируемой скоростью, то отпишитесь, придумаем.
Szen · WWW
№ 3
2009-09-17 15:42
3apa3a
Аватар участника 3apa3a
Очень хочется скрипт с регулируемой скоростью
вот пример http://aquarel-studio.ru/
я хочу так же реализовать навигацию по странице
буду очень признателен если поможете
sergey
№ 4
2009-09-17 19:41
Szen
Аватар участника Szen
3apa3a, новый материал готов. Читайте здесь: http://szenprogs.ru/blog/2009-09-17-70
Szen · WWW
Учавствовать в обсуждении "Плавный скроллинг к якорю на JavaScript" могут только зарегистрированные пользователи.
Реклама
Кнопка портала
Посетители
Друзья портала
Вакантное место для вашей рекламы!
RSS лента Блога
RSS лента Каталога файлов
RSS лента Новостей
Будьте в курсе событий.
Введите ваш email:

Личный блок
  • Гость портала.
  • Личных данных нет.
Вход на сайт
Регистрация
Опрос
Каким CMS вы пользуетесь?
Всего ответов: 244
Статистика
Valid HTML 4.01 Transitional

Яндекс цитирования



Онлайн всего: 4
Гостей: 4
Пользователей: 0
Портал SzenProgs.ru © 2008 - 2019 · Условия
Администратор и дизайнер портала: Szen
Хостинг от uCoz