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

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

HIT

29.09.2015

6018

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

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

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

<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).

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

  • Похожие записи
  • Комментарии
  • Вложения
Изменение объекта при скроллинге

Изменение объекта при скроллинге

Учимся использовать jquery эффекты при скроллинге. Данные эффекты чаще всего применяются на промо-страницах и лэндингах. ScrollMe Скрипт Scrollme состоит из одного файла с набором скриптов, подключаем его Верстка блока для Читать далее »

Прокрутка страницы вверх и вниз

Прокрутка страницы вверх и вниз

Очень нужная «фишка» на сайте — стрелка прокрутки вверх, особенно если страницы получаются довольно длинными, !особенно если на сайте нет прилепленного header. Вставляем в самый низ, перед wp_footer <p id="Go_Top"><a Читать далее »

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

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

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

/

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

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

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