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

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

HIT

29.09.2015

3324

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

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

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

<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 mousewheel plugin Читать далее »

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

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

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

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

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

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

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

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

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