• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Создать плавный скроллинг к элементу на jQuery (Как проскролить плавно страницу вниз до заданного элемента)
Создать плавный скроллинг к элементу на jQuery
Kosten
Дата: Среда, 2018-10-31, 19:19 | Сообщение 1
Администраторы
Сообщений:18498
Награды: 55


Вашему вниманию простой, но безусловно актуальный скрипт для материала на сайте, как плавный скроллинг к заданному элементу, который вы самостоятельно укажете на странице, где будете размещать тот или иной материал. Сам код и его работа заключается в том, что вы по клику плавно на странице переходите к заданной надписи, или как еще говорят, где выставили якорь.

А точнее здесь имеется виду класс под названием go_to и атрибутом href=’#element’ или href=’.element’, где element — будет явятся id класс, где закрепляем для прокрутки на странице. Также при помощи animate происходит анимация, что происходит при заданной прокрутки.

Приступаем к установке:

JS

Код
$(document).ready(function(){
    $('.go_to').click( function(){ // ловим клик по ссылке с классом go_to
    var scroll_el = $(this).attr('href'); // возьмем содержимое атрибута href, должен быть селектором, т.е. например начинаться с # или .
        if ($(scroll_el).length != 0) { // проверим существование элемента чтобы избежать ошибки
     $('html, body').animate({ scrollTop: $(scroll_el).offset().top }, 500); // анимируем скроолинг к элементу scroll_el
        }
     return false; // выключаем стандартное действие
    });
});           

Устанавливаем под переход.

Код
<a class="go_to" href="#elm">Туда</a> или <a class="go_to" href=".elm">Сюда</a>


Где на странице будет происходить плавный переход к элементу с id=»elm» или class=»elm» соответственно.

UPD: Из-за очень большого количества конфликтов, которые происходят при клике, что вешается на элементы под классом go_to!
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Создать плавный скроллинг к элементу на jQuery (Как проскролить плавно страницу вниз до заданного элемента)
  • Страница 1 из 1
  • 1
Поиск: