Плавный скроллинг к якорю на 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
Категория:Скрипты
Просмотрено:12708
Рейтинг: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:

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

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



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