Вы можете авторизоваться через ВКонтакте, Фейсбук и оставить комментарий


Анимированный скролл до элемента (jQuery)

Анимированный скролл в jQuery производится при помощи метода .animate() и передаче в него двух параметров: объекта свойств и скорости анимации.

Например у нас есть на странице ссылка с id="SCROLL_LINK", при нажатии на которую необходимо плавно проскроллить страницу до элемента с id="#SCROLL_TO_ELEMENT". Код будет следующим:

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function(){
    $('#SCROLL_LINK').click(function(){
        // скорость скролла
        var speed = 1000;
        
        // место скролла
        var top = $('#SCROLL_TO_ELEMENT').offset().top;
        
        $('html, body').animate({scrollTop: top}, speed);
        
        return false;
    });
});

Онлайн-пример.

Опубликовано: 02 октября 2013  ·  Автор: Артём Фёдоров  ·  6341 просмотр

Категория

ГлавнаяПрограммированиеJavaScriptБиблиотекиjQueryАнимированный скролл до элемента (jQuery)

Чтобы оставить комментарий нужно авторизоваться на сайте
или войти через ВКонтакте или Фейсбук

Войти через ФейсбукВойти через Твиттер

Комментарии

jQuery, Библиотеки, JavaScript, Программирование

© 2010-2017 expange.ru
При полном или частичном копировании статей сайта, ссылка на источник обязательна.

Хотите узнать больше информации, пишите на: artem@expange.ru

Полезное онлайн  ·  Новости  ·  Изображения  ·  Статьи по датам

О проекте  ·  Правила пользования  ·  Представительства

Благодарности и пожелания