КОнтакты, предложения, отзывы

.rar или .zip
Вложение
Онлайн-чат
На этом сайте, вы найдёте полезную информацию, практические советы в области веб-программирования, веб-дизайна и веб-разработок в целом. Мы с удовольствием поделимся с вами реальными примерами и решениями задач, связанных с jQuery , JavaScript , PHP и MySQL , версткой сайтов , поможем разобраться новичкам с современными технологиями, такими как Ajax , HTML5 , CSS3 и многими другими.

Плавный переход по якорям jQuery

$(function(){ 
  $('a[href^=#]').on("click", function(e){
    e.preventDefault();
    var anchor = $(this);
    $('html, body').stop().animate({
       scrollTop: $(anchor.attr('href')).offset().top
    }, 2000);      
  });
});
тут всё предельно просто: при клике на ссылку, аттрибут href которой начинается с символа # сначала предотвращаем стандартное поведение (e.preventDefault()), записываем для дальнейшей работы нашу ссылу в переменную anchor. После этого идёт само чудо: метод stop() станавливает выполнение текущих анимаций на странице и методом scrollTop за 2 секунды плавно перемещается на позицию элемента, который указан в атрибуте href ссылки, рассчитывая её положение (offset().top). Причём это может быть любой элемент с идентификатором (абзац, див, ссылка и т.д.) Если совпадение найдено
<a href="#top">Вниз</a>
<a id="top"></a>
скрипт будет работать. Благодарю за внимание :)
2015.05.01 177

- Почему я не вижу системные файлы? - А папка у тебя какими обладает свойствами? - Ну... пь..ет, ругается, иногда дебоширит, поздно домой возвращается...
Войдите или Зарегистрируйтесь чтобы оставить комментарий

Комментарии


    Яндекс.Метрика Яндекс.Метрика