/ Scripts & jquery / Плавный скроллинг колесом

Плавный скроллинг колесом

HIT

29.09.2015

6019

Сайт воспринимается более профессионально, если на нем реализована плавная прокрутка колесом.

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

Все это надо поместить в подвал: скрипт, инициализация скрипта.

<script src="<?php bloginfo('stylesheet_directory'); ?>/js/plugins-scroll.js"></script>
<script>
// Skroll-page
$(document).ready(function() {
//Chrome Smooth Scroll
try {
$.browserSelector();
if($("html").hasClass("chrome")) {
$.smoothScroll();
}
} catch(err) {

};

});</script>
Изначально требовалось подключение версии jquery
<script src=»https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js»></script>
но при этом были конфликты с другими версиями jquery и как следствие глючили различные плагины и модули

Нормально работает при добавлении в файл funсtions такого кода (правильная загрузка версий jquery)

// Правильное подключение библиотеки jquery

add_action( 'wp_enqueue_scripts', 'my_load_scripts' );
/**
* Подключаем jQuery из гугла
*/
function my_load_scripts() {

if( !is_admin() ) {
wp_deregister_script( 'jquery-core' ); // отключаем только jquery без jquery-migrate
wp_register_script( 'jquery-core', '//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', array(), null, true ); // регистрируем крайнюю версию из гугла
add_filter( 'script_loader_src', 'jquery_local_loader', 10, 2 ); // вешаем на загрузку скрипта альтернативный jquery
wp_enqueue_script( 'jquery' );
}

}



// проверяем загрузилась библиотека и если нет грузим локальную из вордпресс
add_action( 'wp_head', 'jquery_local_loader' );

function jquery_local_loader( $src, $handle = null ) {

static $add_jquery_fallback = false;

if( $add_jquery_fallback ) {
echo '<script>window.jQuery || document.write(\'<script src="' . includes_url() . 'js/jquery/jquery.js"><\/script>\')</script>' . "\n";
$add_jquery_fallback = false;
}

if( $handle === 'jquery-core' ) {
$add_jquery_fallback = true;
}

return $src;

}

// для маньяков безопасности отключаем версии скриптов
function port_remove_cssjs_ver( $src ) {
if( strpos( $src, '?ver=' ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}

add_filter( 'script_loader_src', 'port_remove_cssjs_ver', 10, 2 );

Еще один альтернативный скрипт плавной прокрутки, не требующий ничего дополнительного, помещаем в подвал

<script type='text/javascript' src='http://liderstroy-ug.ru/wp-content/themes/f-shop/scripts/smooth-scrollbar.js'></script>
Иногда возникают проблемы с тем что не колесо не реагирует (в Opere) — чтобы это устранить надо обновить историю (кэш, куки) браузера
Перестает работать функция браузера увеличение/уменьшение страницы при нажатии cnrl + колесо мыши. Альтернатива: масштабировать cnrl + кнопки +/-

Плагин MouseWheel Smooth Scroll

Этот же функционал предоставляет плагин MouseWheel Smooth Scroll (6 000 установок). В плагине всего две настройки: Step (сила прокрутки) и Speed (скорость прокрутки) (по умолчанию 100 / 400, я ставлю 150 / 500).

Поделиться в соц. сетях:

  • Похожие записи
  • Комментарии
  • Вложения
Создаем анимацию Scroll Down

Создаем анимацию Scroll Down

Для лэндингов часто используют анимацию в виде стрелки или колесика мышки, чтобы показать что можно (нужно) листать ниже. Создадим подобную анимацию с помощью css и jquery. Анимация колесика мышки Создадим Читать далее »

/
Модальное окно на jquery

Модальное окно на jquery

Создаем модальное (всплывающее) окно основанное на технологии jquery. Про подобное решение на чистом CSS читайте здесь. Принцип модального окна Вставляем в HEADER (выше всего контента), #backfon — это фон модального Читать далее »

/
Плавный скроллинг по якорям

Плавный скроллинг по якорям

Реализуем плавный переход по якорным ссылкам в рамках текущей страницы. Данный скрипт особенно хорош тем, что не добавляет в строке браузера приставки /#link. Script Скорость перехода может регулироваться. В предложенном Читать далее »

Добавить комментарий

Пока нет комментариев. Будь первым!

Плавный скроллинг колесом
Дополнительные статусы заказа
Рекомендации для васДополнительные статусы заказаOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.